升级到Vue 3后图像高度重置为0

Question

我有以下图像定义。

模板：

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

JS：

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

此代码适用于 Vue 2。请注意，图像的高度是直接在图像中设置的。

问题：升级到 Vue 3 后，渲染组件中的图像高度设置为 0。

这是它生成的内容：

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

问题：如何让 Vue 3 正确渲染 SVG 图像的高度？

Answer 1

尝试删除px并height="150px"保留它，如下所示：

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

数据属性应该是：

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