Subscribe on changes!

img tag attributes 'width, height' rendering with 0

avatar
Dec 11th 2020

Version

3.0.4

Reproduction link

https://codesandbox.io/s/pensive-wildflower-coe5n?file=/src/App.vue

Steps to reproduce

<img width="100%" height="100%" alt="Vue logo" src="./assets/logo.png" />
<img width="100px" height="100px" alt="Vue logo" src="./assets/logo.png" />

What is expected?

Expected as same as vue 2.

What is actually happening?

The value of width and height is 0


It looks very similar to #2677

avatar
Dec 11th 2020

The width and height attributes should be in pixels: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/width

avatar
Dec 12th 2020

@posva setAttribute can avoid this problem.I don't know why we not use setAttribute here. Is there any special reason?

avatar
Dec 12th 2020

it's because in Vue 3, attributes are set as properties: el.width = ... instead of el.setAttribute() if they can be set. For this specific case, one should use the style width and height, which are more appropriate.

Note that even the attribute should be in pixels without unit: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-width

avatar
Dec 12th 2020

Ok,I got the point.