Image height is reset to 0 after upgrading to Vue 3

Question

I have the following image definition.

Template:

<img :src="logoSVG" height="150px" alt="logo" />

JS:

data() {
  return {
    logoSVG: require('./assets/logo.svg')
  }
}

This code works well with Vue 2. Note that the height of the image is set directly in the image.

Problem: After I upgraded to Vue 3, the images height is set to 0 in the rendered component.

Here is what it generates:

<img src="/img/logo.136099f1.svg" height="0" alt="logo">

Question: How to make Vue 3 correctly render height of an SVG image?

Answer 1

Try to remove px from height="150px" and keep it like :

<img :src="logoSVG" height="150" alt="logo" />

and the data property should be :

data() {
  return {
    logoSVG: require('./assets/logo.svg').default 
  }
}

Answer 2

If you were using % of another units, a style tag can be used instead of width or height attributes. For example, style="width: 100%"