vuejs v-html图像标签不解析src

Posted 2023-02-22

【中文标题】vuejs v-html图像标签不解析src

【英文标题】：vuejs v-html image tag not resolving src

【发布时间】：2019-05-06 18:25:11

【问题描述】：

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

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

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

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

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

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

【问题讨论】：

如果您查看this fiddle，它似乎工作正常。我认为问题实际上出在您的道路上。编辑：也许看看 at this link 可能会解决您的问题

在浏览器控制台的网络选项卡中查看是否正在发出对图像的请求，如果是，是否由于404错误而失败，在这种情况下，如上评论者建议，您的路径将是错误的

代替这条路径../assets/Content/img/Myfav_empty.png，试试这个@/assets/Content/img/Myfav_empty.png，或者这个~@/assets/Content/img/Myfav_empty.png

【参考方案1】：

它似乎只是完美的。

我已经实现了相同的方式来获取图像，在这里我可以看到图像。 请再次检查路径。

您可以查看下面我尝试以相同方式实现的示例 :http://jsfiddle.net/suprabhasupi/eywraw8t/491005/

【参考方案2】：

问题出在你正在使用的 src url，src url root 是公共目录。

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

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

【讨论】：

这已经解决了这个问题。但是我想知道，如果要指定相对路径，有人会怎么做？

你能告诉我一个你想要的相对路径的例子吗，因为如果相对路径在公共目录之外，那么它不会用这种方式工作。