vue项目js代码中输出html代码时，使用img标签引用图片不显示的解决方法

已于 2023-08-12 18:52:24 修改
阅读量2.2k 收藏
点赞数
文章标签： javascript vue.js html
于 2023-08-12 18:23:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/demons19961019/article/details/132251974
版权

vue项目js代码中输出html代码时，使用img标签引用图片不显示的解决方法，

不显示的代码图片

html部分

js部分 

 此时页面图片展示不出来

解决办法1

图片放置在public打包后的目录下

js代码引用

解决办法2

使用变量承载并require图片路径

js代码引用 

两种解决方案分析

方案1放置在public文件夹内，会导致图片没有经过webpack压缩，最终增加打包体积相比放置在src文件夹内更大，但是可以通过相对路径直接引用没有其他引用问题，加载速度更快

方案2放置在src文件夹内，可以压缩图片，相比public文件夹内存放打包体积小，但是引用时可能会出现引用方法问题需要解决，但是经过webpack打包、压缩和优化，客户端页面加载时间会缩短，带宽占用会相比public文件夹更小

最后总结

考虑性能和开销等影响，如果图片等静态资源体积较大的情况下，考虑放置在public文件夹内，反之，放置在src文件夹内

Demons小妖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中＜img＞标签图片想实现动态切换时，无法正常显示问题
头发掉光光的博客
10-22 4430
目录 问题描述 解决办法 问题描述 最近又在写项目，写到点赞这个地方的时候，想要实现一个图片的动态切换。本以为是一个很简单的问题，没想到却出了问题。 首先我们来看看不进行动态切换时的状态： <img src="../assets/image/踩.svg"> 此时的浏览器控制台显示的是这样的: 图片的路径和我们在编辑器中写的是有出入的。 而当我想要是实现动态切换时，我最...
Vue中插入HTML代码的方法
12-03
我们需要吧<p>Hello World插入到<p>My name is Pjee应该如何做？...请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。 二、渲染函数 渲染函数：这是通过对VNode（虚拟DOM）的操作来生成 text()
关于vue的自定义指令问题
weixin_44898897的博客
04-13 239
今天学习了vue的自定义指令： 自定义指令：全局自定义指令 + 局部自定义指令 全局自定义指令： （参照官网上的例子） Vue.directive("focus", { inserted: function(el){ el.focus(); } }) new Vue({ el...
解决vue中img或元素背景图片无法显示或路径错误问题
WanweI897的博客
08-01 4854
解决vue中img或元素背景图片无法显示或路径错误问题。
VUE3语法--img图片不显示 img的src动态赋值图片显示_vue3 img src 动态赋值
最新发布
2401_84437095的博客
05-16 605
我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】篇幅有限，仅展示部分截图：常见情景2。
解决在vue中img标签不显示图片的问题
munangs的博客
08-10 3557
解决在vue中img标签不显示图片的问题
解决：vue项目中，Image组件中的图片加载不出来
weixin_56554735的博客
04-11 922
1. 将数据库里存放的是图片的网址链接，另外保存，并命名为xxx.jpg形式，并将图片都存放在了前端代码的asstes文件夹中，原因：应该是图片还没有加载出来，页面就已经渲染了，所以图片显示“加载失败”报错：GET xxxxx.jpg 403。文章主要是为了记录自己写代码中的报错。
vue中img标签图片加载失败加载另一张图片
m0_73162280的博客
06-26 720
当图片不存在时，将触发 onerror事件，而 onerror 中又为 img 指定一个图片。也就是说图片存在则显示logo.png，图片不存在将显示 error.png。
vue img标签src使用网络地址展示图片无法显示
以爱护甲,爱满枫林。
02-27 2810
referrer，一种引用策略，可以用来防止图片或视频被盗。它的原理是：http 协议中，如果从一个网页跳到另一个网页，http 头字段里面会带个 Referrer。图片服务器通过检测 Referrer 是否来自规定域名，来进行防盗链。如果没有设置referrer，那就可以直接绕过防盗链机制，直接使用或盗取。解决办法，在index.html头部添加meta标签 商业转载请联系作者获得授权，非商业转载请注明出处。
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
12-29
为此去官网上查了下资料，发现在vue2.0版本中，{{{}}}转换HTML的方式已经被废除，该版本中必须使用v-html标签进行转换，下面是具体的使用方法： <span v-html=htmlData> {{htmlData}} 总结 以上所述是小编给大家...
用v-html解决Vue.js渲染中html标签不被解析的问题
01-19
最近在工作中遇到一个问题，在网页中后台传来的json数据中包含html标签，将该json数据绑定到Vue.js中对象中，对该对象进行for循环，发现数据中的html标签不能被解析，而是当作字符显示出来。 问题如下所示： 解决...
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
10-18
下面小编就为大家分享一篇解决使用Vue.js显示数据的时,页面闪现原始代码的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中img的src是动态渲染时不显示的解决
01-19
今天在项目中遇到一个需求，设计稿如下 就是展示用户头像，数据从后端获取...以上这篇Vue中img的src是动态渲染时不显示的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
img标签图像显示不出来，只有一个框
qq_46896305的博客
10-04 1475
2.最关键的是在你加载资源启动tomcat后，再更改照片路径后出现了照片不显示的问题，或者js中window.location.href=‘del.do?fid=’+fid;运行后不显示弹框的问题，是因为没有把资源加载进去，方法如下。启动服务器，在out文件夹下自己项目命名的文件夹删掉，再重新启动服务器就能显示了（原来在文件夹中找不到img下面自己刚刚放进去的照片，重新加载服务器后就能看到了）1.这种问题首先要考虑路径是否写的有问题。
<img>标签显示不出图片——图片路径问题
热门推荐
cc_bk的博客
11-15 1万+
引言： 大家在进行开发的过程中，经常会有显示图片这个需求，但是却经常因为种种问题显示不了，接下来，我将详细叙述这个问题，希望对大家有所帮助。 图片显示不出，一般有三个问题： 一.图片所在路径错误 二.图片后缀名错误 系统自动隐藏了图片后缀名，本来是.png格式，却写成了.jpg或.jpeg 解决方法： 右键查看图片的详细属性，观察图片的后缀名 三.浏览器不支持 部分浏览器对有些路径书写方式不...
图片放到了public文件下，打包部署不放到服务器的根目录，图片找不到位置
lxuanz的博客
11-14 1653
打包
解决Vue中动态src图片不显示
weixin_61945023的博客
07-21 4723
解决：Vue项目中动态绑定src图片不显示问题，需要加require（）
vue2中img标签的src是动态渲染的，路径是对的，就是显示不出来
weixin_47617631的博客
06-14 925
解法来源于这位大佬：https://www.cnblogs.com/corgisyj/p/12025012.html。加上require() 即可。
vue自定义指令，图片加载不出来，使用默认图片的三种方法
weixin_50367873的博客
06-30 2597
一、常规解决方法 我们都知道，img标签支持onerror事件，在装载文档或图像的过程中如果发生了错误，就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。 <img src="images/logo.png" onerror="javascript:this.src='images/logoError.png';"> 当图片不存在时，将触发 onerror，而onerror 中又为img 指定一个logoError.png 图片。也就是说图片存在则显示logo.png，
用v-html解决vue.js渲染中html标签不被解析的问题
05-02
在使用Vue.js时，遇到了一个常见问题，就是在渲染页面时，HTML标签会被直接输出，而不会被解析。这是因为Vue.js默认使用了一种叫做文本插值的方式，将插值表达式中的HTML代码转义成普通文本。这在某些情况下可能会导致我们想要呈现的样式和效果失真。而使用v-html指令，可以解决这个问题。 v-html指令可以用来解析包含HTML代码的字符串，并将其渲染到页面上。它允许将Vue实例中的数据直接绑定到HTML代码上，从而使得HTML标签得以正常解析。 在使用v-html指令时，需要将需要渲染的HTML代码包含在一个具有v-html属性的标签中，然后将这个标签绑定到Vue实例的一个数据属性上。例如，可以定义一个data属性htmlText，其内容为包含HTML代码的字符串，然后可以在模板中使用v-html指令将其渲染出来，如下所示： ``` <template> <div v-html="htmlText"></div> </template> <script> export default { data() { return { htmlText: '<h1>Hello world!</h1><p>This is a <b>bold</b> text.</p>' } } } </script> ``` 需要注意的是，由于v-html会将数据中的HTML代码直接渲染到页面上，因此需要谨慎处理这个数据，以避免可能存在的XSS漏洞。在任何情况下，都不要将未经过过滤的数据直接传递给v-html指令。在处理用户输入时，应该使用sanitize等工具库对数据进行过滤和转义。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值