图片加载失败显示默认图片

最新推荐文章于 2024-08-20 10:32:53 发布
原创 最新推荐文章于 2024-08-20 10:32:53 发布 · 7.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#图片 #标签 #默认图片 #图片加载 #图片不存在

本文介绍了一种简单的方法来处理网页加载图片时遇到的问题，即当图片不存在或路径不正确时，通过在img标签中使用onerror属性设置默认图片来避免显示错误图标。

在页面加载的图片的时候，如果图片不存在或者路径不存在，页面加载图片就会如下图所示。
这里写图片描述

解决方法：
在img 标签中添加一下标签

onerror="onerror=null;src='img/a3.jpg'"

src中写默认图片地址即可

微信小程序处理图片加载失败显示默认图片
明知山
01-14 3987
微信小程序image组件有个binderror事件专门用来处理图片加载失败的问题，我们只需要传个下标去获取相应的图片位置 <image src="{{item.img}}" binderror="geterr" data-index="{{index}}"></image> data: { recom_list:[] } geterr(e) { var...
图片加载失败的处理
weixin_41897680的博客
05-02 7154
图片加载失败的处理
img 加载网络图片失败 显示默认图片的方法
08-30
下面小编就为大家带来一篇img 加载网络图片失败 显示默认图片的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
图片加载失败显示默认图片占位符方法
06-11
效果描述： 我们都知道，当网页中加载的图片因为某种原因而加载失败的时候 浏览器会用图片的alt值代替当前图片位置 但是现实中我们往往需要默认的内容来代替加载失败的图片 用以提示用户图片加载失败等信息 怎么办呢，今天懒人站长特意给大家推荐了这样一个方法： onerror="onerror=null;src='http://www.lanrenzhijia.com/images/default.gif'" 将上述代码复制到你的图片标签中即可 然后故意将你的图片路径(src)指向一个错误地址，这个时候就会显示我们默认的图片
img 加载失败特定默认图片
weixin_50559423的博客
08-20 2722
本文讲解一个简单的问题，平常我们开发的时候难免用到标签。当图片src地址不存在 及 加载失败的时候，想给一张加载失败的图片。直接上代码。 第二种 在vue中 直接直接使用 @error事件 第三种 当你确认src 可能为空或者是错误时 给一个或的条件 以上就是 图片加载失败的 显示其它默认图片的处理。看完别忘记点赞哦，小二在此谢过了！
图片加载失败显示默认图
小怪獸丶的糖的专栏
08-17 1770
<img src='' class='img' onerror='whenError(this)'/> function whenError(a) { a.onerror = null; a.src = '/images/pic_empty.png'; }
微信小程序图片加载失败时替换为默认图片的方法
01-03
1、第一种情况：单独加载一个图片 index.wxml代码： <image class=userinfo-avatar src={{avatar}} binderror=errorFunction></image> index.js代码： errorFunction: function(){ this.setData({ avatar: '/...
wpf 异步加载图片完成后再显示，失败则显示本地图片
06-26
2. **图片加载失败处理**： 在异步加载过程中，可能会出现加载失败的情况，如网络错误、文件不存在等。为处理这种情况，我们可以监听BitmapImage的DownloadCompleted事件，如果下载失败，可以设置一个本地备份图片...
vue图片加载失败时用默认图片替换的方法
10-16
虽然在图片加载失败时`alt`属性不会显示默认图片，但依然建议为每个图片设置有意义的`alt`属性，以提升网页的可访问性。 在实际应用中，尤其是后台管理系统或内容丰富的网站，这种处理方式能大大提升用户体验。例如...
img标签图片加载失败显示图片
weixin_46858893的博客
04-20 1348
img标签图片加载失败显示图片 onerror="οnerrοr=null;src='../../image/community/initialize_img.png'"
转载-当图片加载失败或者没有的情况下显示默认图片
xihii6的专栏
06-25 1399
img加载图片偶尔会出错，利用onerror可以加载一个缺省图片，也可以重载同一张图片。 但是都要考虑，重载的图片仍然错误，就会陷入死循环 下面给出一个带重试次数，并且延迟加载的实现，超过重试次数仍不能正常显示的，显示缺省图片   html>  head>  title>显示默认图片title> script type="text/javascript">     functio
图片加载失败或默认图片
qq50521的博客
06-29 3670
直接上马 $('img').each(function(k,i) { if($('img').eq(k).height()<200){ if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
图片加载失败处理
小妮子的博客
11-24 3295
图片加载失败咋办呢？ 需要给该图片替换为一张默认的背景图 1、情况1：IMG标签 e.g.: function nofind(){ var img=event.srcElement; img.src="../assets/images/news/news_loaderror.png"; img.onerror=null; //控制不要一直跳动 }  2、情况2：backgro
图片加载出错的处理方式
fehub
06-01 2038
通常情况下，HTML 中的 img 标签加载出错后会默认显示一张裂开的图片，如果设置了 alt 属性，还会在默认图片后面显示 alt 属性的内容。
图片跨站加载失败
aaa1_1aaa的博客
09-20 468
本地项目调用其他网站的图片，显示空白 适用情况： 网站加载图片失败或显示空白，检查代码发现链接正常。点击链接，跳转图片链接正常显示，刷新页面，点击过的图片正常显示。 解决办法： 头部 meta 标签加上  name="referrer" content="never"； &lt;meta charset="UTF-8" name="referrer" content="never"&gt
img图片加载失败，使用默认图片显示。
konichiwa1996的博客
03-30 5315
img图片加载失败，显示默认图片。 当图片不存在或加载失败时，使用onerror属性设置显示默认图片。 <img src ="img/car.jpg" οnerrοr="javascript:this.src='img/noPicture.png'"/> 【注】：如果onerror中的图片因网络不畅或路径错误找不到图片，则会发生死循环，可以使用js代码来解决。 <script ...
图片加载失败，显示默认图片
java群210698865的专栏
12-12 779
http://rlzy.jxxxxxsd.com.cn/SYEHR_WEB/public.do?method=getEmpsssePhoto&employeeID= %>" onerror="this.src='${pageContext.request.contextPath}/images/mydocument/touxiang.jpg';" width="100" height="102
页面图片加载等候以及加载失败后图片替换
qpc353386051的专栏
11-03 325
[code="js"] /* * jQuery loadImage plugin * Version 2.0.0-2014.11.03 * Requires jQuery v1.7 or later * * @Description: 页面图片加载等候以及加载失败后图片替换 * @Author: * @CreateDate: * @UpdateDate: 20...
html图片加载特效（预加载和加载失败）
qq_38847914的博客
04-11 2441
调用的方法 $(function () { $("img").delayLoading({ // defaultImg: "static/images/timg.gif", // 预加载前显示的图片 errorImg: "", // 读取图片...
vue中img标签图片加载失败显示默认图片路径
最新发布
10-10
在Vue中，当img标签图片加载失败时显示默认图片路径有以下几种实现方法： ### 方法一：使用`onerror`属性 可以直接在`img`标签中使用`onerror`属性来指定默认图片路径。示例代码如下： ```html <img src="原来要加载的资源" onerror="this.src='默认的图片路径'"/> ``` 这种方式比较简单直接，当图片加载失败时，会自动将`src`属性替换为默认图片的路径。 ### 方法二：通过`@error`方法结合自定义函数 在Vue组件中，可以通过监听`@error`事件，在事件处理函数中设置默认图片路径。示例代码如下： ```html <template> <div class="book-img"> <img v-if="item.coverImg" :src="item.coverImg" @error="errorImg($event)" /> </div> </template> <script> export default { data() { return { item: { coverImg: '原来要加载的资源' } }; }, methods: { errorImg(e) { e.srcElement.src = require('../../src/assets/no-img.png'); e.srcElement.onerror = null; // 防止闪图 } } }; </script> ``` 在上述代码中，当图片加载失败时，会触发`errorImg`方法，将图片的`src`属性替换为默认图片的路径。同时，设置`onerror`为`null`可以防止图片一直加载失败导致的闪屏问题。 ### 方法三：在组件的`data`中设置默认图片路径 可以在组件的`data`选项中定义默认图片路径，然后在`@error`事件处理函数中使用。示例代码如下： ```html <template> <img :src="img" @error="handleError" /> </template> <script> export default { data() { return { img: '原来要加载的资源', defaultImg: require('@/assets/images/right/default-person.png') }; }, methods: { handleError(e) { e.target.src = this.defaultImg; } } }; </script> ``` 这种方式将默认图片路径的定义和使用分离，使代码更加清晰和易于维护。 ### 方法四：在`onerror`属性中使用Vue的`require` 可以在`onerror`属性中直接使用Vue的`require`来引入默认图片。示例代码如下： ```html <template> <img :src="img" :onerror="defaultImg" /> </template> <script> export default { data() { return { img: '原来要加载的资源', defaultImg: `this.src = '${require('@/assets/images/right/default-person.png')}'` }; } }; </script> ``` 在上述代码中，`defaultImg`是一个字符串表达式，当图片加载失败时，会执行该表达式将`src`属性替换为默认图片的路径。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值