javascript - vuejs v-html图像标签无法解析src

Question

我有一个 vue 页面，它使用 v-html将 html 内容放入 <div> 中如下:

<div v-html="noDataMessage">               
</div>

还有noDataMessage的数据设置于created() vue的生命周期钩子(Hook)。

created() {  
   this.noDataMessage = "<img src='../assets/Content/img/Myfav_empty.png' width='35px' height='35px'>";
}

html 标签显示正常，但无法获取图像。 我尝试单独加载图像，看看图像路径是否正确，并得到了图像。

我是否遗漏了 vue.js 或 v-html 的任何特定内容？

Answer 1

问题出在您使用的 src url 中，src url 根目录是公共(public)目录。

例如，如果您的所有图像都在 public->images 目录中，那么您的代码将如下所示:

this.noDataMessage = "<img src='images/Myfav_empty.png' width='35px' height='35px'>";