img tag attributes 'width, height' rendering with 0

[Ryan2128]

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

[posva]

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

[edison1105]

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

[posva]

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

[edison1105]

Ok,I got the point.