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?
Advertisement
Answer
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 } }