在v-html里的img标签使用相对路径,图片加载不出来
发布于 3 天前 作者 huaer 96 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

例如:
html
<div v-html="rawHtml"></div>
js
function rawHtml () { return '<img src="../1.png" />' }
上面这段代码把路径换为网络地址就可以显示,用本地的相对地址就不行,而直接在html里写img标签是可以显示的
<div><img src="../1.png</img>

请问这是什么原因呢?

17 回复

v-html绑定的是data里面的数据,你这种写法会被解析成
<div>
function rawHtml(){
return '<img src="../1.png"/>'
}

我觉得应该这么写

html
<div v-html="rawHtml"></div>
js
data(){
return{
rawHtml: '<img src="../1.png" />'
}
}

如果是同域的,那就是你相对路径写的不对,如果是跨域的那就不能写相对路径,就这么简单。

楼主我遇到和你一样的问题,你最后怎么解决的呢?

为什么不直接把img标签写在template里面?

w316431585:

到和你一样的问题,你最后

把图片放到static目录,用./static/开头就可以了,webpack也要配置一下相对路径

打包后的图片会到 static 目录下,所以不对

let a = require("…/…/assets/images/upload.png");
this.b=’

’+courtName+’

这样写可以显示出来

图片是用户上传的图片我这里是没有的,我只是把后台发我的数据用v-html显示出来但是只显示文本,不显示图片

你要是实在想这样,也可以,把图片放到static目录下面,然后返回./static/xxx.jpg

额…你还是没看到我说的,图片是用户传的我这里没有的

这样写试试:
:src=“require(‘图片相对路径’)”

让接口返回图片的http地址

写绝对路径,除非你能确定相对路径是正确的。

楼主有解决问题吗?我现在也是一样的错误,用v-html渲染img的相对路径图片不显示,不知道怎么去解决了

用户上传的图片不在你项目文件里,当然不能用相对路径了!你要让后台发完整的http图片路径,或者自己操作字符串补全http图片地址

我回复的内容怎么都没有显示出来

回到顶部