Version

3.0.11

Reproduction link

https://codesandbox.io/s/quizzical-currying-ghez4?file=/src/App.vue

Steps to reproduce

.vue

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

Render

.html

<img alt="Vue logo" src="./assets/logo.png" />
 <img alt="Vue logo" src="./assets/logo.png" width="100" />
 <img alt="Vue logo" src="./assets/logo.png" width="0" />
 <img alt="Vue logo" src="./assets/logo.png" width="0" />

The height of an image is measured in CSS pixels in HTML5, and it can be either pixel or percentage in HTML 4.

What is expected?

.html

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

What is actually happening?

👀

This seems to be a bug and is normal in vue2. As a workaround, using style attribute could solve your problem.

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

The width and height attributes must be integers without unit, in pixels: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-width. It's different from the css attribute. Only <img alt="Vue logo" src="./assets/logo.png" width="100" /> is valid.

Duplicate of https://github.com/vuejs/vue-next/issues/2801