vuejs v-html 图像标签无法解析 src [英] vuejs v-html image tag not resolving src

问题描述

我有一个 vue 页面，它使用 v-html 将 html 内容放在

中，如下所示:

并且noDataMessage的数据设置在vue的created()生命周期钩子中.

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

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

我是否遗漏了 vue.js 或 v-html 的任何特别之处?

解决方案

问题出在您使用的 src url 中，src url 根是公共目录.

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

this.noDataMessage = "";

I have a vue page which uses v-html to place an html content inside a <div> as follows:

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

And the data of noDataMessage is set in created() lifecycle hook of vue.

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

The html tag is showing properly, but it is not able to fetch the image. I tried to load the image separately to see if image path is correct, and got the image.

Am I missing anything particular to vue.js or v-html in particular?

解决方案

The issue is in the src url you are using, the src url root is the public directory.

For example, if you have all your images in public->images directory then your code will look like this:

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

这篇关于vuejs v-html 图像标签无法解析 src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！