当图片路径为空时替换为默认图片

于 2022-01-19 16:21:19 发布
阅读量878 收藏
点赞数
文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44827018/article/details/122583750
版权

记录我做前端以来从新手小白开始遇到的小问题(2)

<img :src="(imgUrl=='')? require('../图片路径/图片名.jpg') : imgUrl">

因为是从后端获取数据，部位，有的图片为空，需要替换为默认图片进行显示，因为不是数组，不能用map，foreach遍历，if判断也不行，查了很多，最后灵光一现，想试试三目可不可以，通过百度各种查找，最后实现了！

一定要加require，否则路径里只是你写的路径，并不会显示图片，

团子的小仓库
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery解决图片路径不存在执行替换路径
10-27
在一些图片比较多的网站上会出现访问时图片不存在的情况：默认显示出来的样子很不雅观,可以解决图片不存在时，使用其他的图片替换吗，答案是可以的；感兴趣的朋友可以了解下，或许本文可以帮助到你
javascript批量检查当图片不存在时则显示默认图片的代码
12-09
当图片加载失败（即发生错误）时，事件监听器会被触发，我们此时更改图片的`src`属性为默认图片的路径。 为了优化性能，可以使用CSS预先定义图片的样式，就像在题目描述中给出的一样： ```css img { border: 1px ...
uni-app image组件当显示不出图片时显示默认图片
jyy_99的博客
02-25 2999
我的image绑定了数组，数组中的对象包含要显示的图片路径， 我的路径是服务器的路径，所以会存在显示不出来的情况，当显示不出来的时候就要显示本地的默认图片 我的方案是这样的： image有一个error的方法 当图片显示不出来的时候就会调用这个方法，所以在这个方法里把图片的路径改为本地的路径就可以了 ...
图片为空时设置默认图片
u013195452的专栏
12-28 837
vue data里面图片要是用require 引入，参数是errorimg errorimg:'this.src="'+require('@assets/plat/bk3.png')+'";this.onerror=null', 页面中使用，判断是否为空，空的话给一个随便的值代表错误就会使用onerror <img:src="!item.image?'cdcd':item.image":onerror="errorimg"/> ...
img标签无图片或者图片url错误时显示默认图片
姚家威的博客
08-08 1604
这里是第一篇博客的内容
前端html的图片路径为空显示方案
人生不过是一场旅行，你路过我，我路过你，各自向前，各自修行。
12-04 1284
<img src="main_img.png" onError="this.onerror=null;this.src='/images/missing.png';" /><img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" width="0" height="0" alt="" />下面是javascript
vue项目中图片加载不到时，使用默认图片替换
肖帅的博客
04-08 1096
vue项目中图片加载不到时，使用默认图片替换 解决方法： ①使用三目运算符 ②使用onerror <img :src="item.photo ? item.photo :''" alt="头像" class="photo" :onerror="defaultImg" /> co...
微信小程序图片加载失败时替换为默认图片的方法
10-15
在上述代码中，当`avatar`图片加载失败时，`errorFunction`会被调用，并将`avatar`的值改为默认图片的路径。 2. 使用`for`循环加载多个图片 在需要展示多张图片的情况下，可以使用`wx:for`循环遍历数组，并为每个...
百度UEditor自定义上传图片存储路径为本地路径
07-16
4. 七牛云、阿里云等CDN服务：为了提高图片加载速度，可以考虑使用CDN服务，将本地存储的图片路径替换为CDN地址。 五、集成进项目 1. 将修改后的Java代码部署到你的项目环境中，并确保配置正确。 2. 更新UEditor的...
JavaScript判断图片是否能够加载,失败则替换默认图片
10-28
这时，为了提供良好的用户体验，我们可以编写代码来判断图片是否能成功加载，并在加载失败时用默认图片进行替换。这种功能可以避免页面出现空白或者不美观的占位符，提升网站的专业性和可靠性。 首先，我们需要创建...
js判断图片是否存在，不存在则替换为默认图片
crr_wish的博客
08-26 5937
方法一：利用image对象的onerror事件来判断，出错则更换image对象的src为默认图片的URL。 <img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址'"> //chorme 和 firefox 测试正常 //chorme 和 firefox测试正常  注意：如果使用不当，会造成死
vue图片不存在时加载默认图片
1234Wu--Blog
07-25 490
在文件中的img那里添加:οnerrοr="errorImg01"，然后设置errorImg01的路径如果直接写成 errorImg01: ('../../assets/images/item_image.png')，会找不到这个图片 由于项目启动后， 图片的路径并不是我们写的路径了。所以我们用 errorImg01: 'this.src="' + require('../....
使用默认图片替代某张图为空时的情况
weixin_34074740的博客
03-18 146
今天听小伙伴在群上讨论当图片为空时使用默认图的情况，作为好奇一下，自己写了一段程序好验证一下； 在这里不得不谈ready和load的区别了： reay先于load执行，就是在构造html,dom模型的时候执行，而load的话，则在页面加载完毕之后执行，以下是执行步骤： 1.解析HTML结构 2.加载外部脚本和样式表文件 3.解析并执行脚本代码 4.构造HTML DOM模型 //re...
php替换图片_PHP如何替换文章中图片路径及下载图片到本地服务器
weixin_29147589的博客
03-09 404
如今的PHP从业人员在不断的增加，企业中需要的PHP工程师也在不断的增长，因此学好PHP开发技术找到一份满意的好工作是不少参加PHP培训学习PHP开发的小伙伴们的心愿，今天扣丁学堂PHP培训小编就给大家分享一个PHP开发方面的技能，那就是PHP如何替换文章中图片路径及下载图片到本地服务器，喜欢PHP开发的小伙伴就随小编一起来看一下吧。 PHP培训​PHP替换文章中的图片路径，下载图片到本地服务器：...
img标签后空白
YIMT的博客
04-26 308
img标签后空白 原因img标签默认底线与文字的基线对齐，这时页面img标签下在就会有文字基线和底线的空白 解决方式： 调整基线 /* 将元素的中间与基线对齐，再加上父对象的x高度的一半。 */ vertical-align: middle; 修改为块级显示模式 display:block; ...
img标签为空的陷阱
aa110412的博客
04-10 703
把页面中的img标签的src设置为“”存在巨大的风险，无论是在html中写入 <img src=”" /> 还是在js中写入 var img = new Image(); img.src = “”; 出现一次这样的标签会导致向你的服务器多做一次请求。img标签的src=""时，会引起浏览器再次访问"./"即当前目录，如果该目录下有default...
img标签去间隙及src为空时的默认边框
FBm的博客
11-22 4321
一 间隙问题 多个img图片放在容器中时，会出现间隙，就算设置margin:0;padding:0也无法解决问题，类似下图（如果觉得背景色好看，请阅读css好看背景色贴）： 请看代码： 定义img宽度为warp容器的25%，但是实际效果img在容器却不能排成一行，而是因为间隙被挤了下去。 因此在查阅相关资料以后，总结以下几种解决方法： 1 .wrap img添加float
img 图片找不到时，设置显示默认图片
qq_44290077的博客
07-06 8992
img 图片找不到时，设置显示默认图片
你知道前端对图片的处理方式吗？
weixin_34356310的博客
02-26 685
前言 作为前端工程师 de 我们，日常少不了会跟图片打交道。在各大电商平台工作的前端工程师们，感受可能会更加的明显。 以下是我之前跟图片打交道踩到的坑，跟大家分享一下经验。 一、情景再现 用postman请求接口的时候，返回的是这个图片（二进制） 在chrome的network查看的时候，返回的也是这个图片（二进制） 可是，在debu...
vue 图片404 替换默认图
最新发布
09-06
在Vue中，可以使用`v-bind`指令来绑定图片的属性值。如果图片无法加载（即返回404错误），可以通过在`<img>`标签中添加`v-on:error`事件来处理。...这样，在图片加载出错的情况下，就能够替换为默认图片。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值