关于图片加载失败后显示默认图片

最新推荐文章于 2024-08-20 10:32:53 发布
转载 最新推荐文章于 2024-08-20 10:32:53 发布 · 177 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/shiliang199508/p/6805334.html

本文介绍了一种在HTML中使用img标签的onerror属性来设定默认显示图片的方法，当指定的图片路径加载失败时，会自动替换为设定好的默认图片。

在img标签上面加个属性 onerror 设置下默认图片的路径即可，如下

<img src="test.jpg" onerror="this.src='../../Content/themes/base/mobi/images/onerror.jpg'" alt="" />

 

当src中的路径加载图片失败的时候就会执行  onerror里面的代码  更改src的路径为 ../../Content/themes/base/mobi/images/onerror.jpg

 

转载于:https://www.cnblogs.com/shiliang199508/p/6805334.html

图片加载失败后---加载默认图片
IF_YOU5849的博客
08-09 1178
一 . 图片加载失败原因： 文件路径不正确； 标签属性等元素错误； 错误的文件扩展名 文件丢失 存放位置出现问题 网络传输问题； 二 . 加载失败后页面默认样式 如下 ↓： 三 . 封装函数：图片加载后，显示自定义图片： // 图片加载失败后---加载默认图片 // img class名：load-space-img // 调用方式：img标签内调用 οnerrοr="getdefault...
图片加载失败显示默认图片占位符方法
06-11
效果描述： 我们都知道，当网页中加载的图片因为某种原因而加载失败的时候 浏览器会用图片的alt值代替当前图片位置 但是现实中我们往往需要默认的内容来代替加载失败的图片 用以提示用户图片加载失败等信息 怎么办呢，今天懒人站长特意给大家推荐了这样一个方法： onerror="onerror=null;src='http://www.lanrenzhijia.com/images/default.gif'" 将上述代码复制到你的图片标签中即可 然后故意将你的图片路径(src)指向一个错误地址，这个时候就会显示我们默认的图片
前端页面图片加载失败显示默认图片
子非渔
03-15 9419
方法有多种：1.首先说我用的，看代码//页面图片加载失败时 默认显示统一处理document.addEventListener("error", function (e) {    var elem = e.target;    if (elem.tagName.toLowerCase() == "img") {        elem.src = "/image/General/errorDef...
加载图片失败显示默认图
幸福有多远
12-15 195
前言：加载图片失败显示默认图 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta htt...
Vue 图片加载失败显示默认图片
weixin_45128657的博客
04-15 1389
【代码】Vue 图片加载失败显示默认图片。
vue图片加载失败时用默认图片替换的方法
10-16
我们可以利用这个事件，在图片加载失败时，用预设的默认图片替换原本应该显示的图片。以下是实现这一功能的步骤： 1. **定义默认图片**：在Vue组件的`data`选项中，声明一个变量，例如`defaultImg`，用来存储默认...
微信小程序图片加载失败时替换为默认图片的方法
10-15
为了提供良好的用户体验，当图片加载失败时，通常会将默认图片显示出来，以代替无法正常显示的图片。本文将详细介绍两种处理微信小程序图片加载失败并替换为默认图片的方法。 1. 单独加载一个图片 在微信小程序中，...
「前端进阶」如何优雅的处理图片异常
tradas的博客
07-29 633
引子 在我们的实际工作中，不可避免的会在页面中加载大量图片，但可能由于网络问题，或者图片文件缺失等问题，导致图片不能正常展示 我们希望有一种降级处理的方式，可以在图片加载失败后显示一张我们预先设定好的默认图片 监听图片的 error 事件 由于图片加载失败后，会抛出一个 error 事件，我们可以通过监听 error 事件的方式来对图片进行降级处理 复制代码let img = document....
当页面中图片加载失败时，显示默认图片
一只会喊666的咸鱼的博客
08-27 1881
一、首先我们知道显示一张图片，通过访问图片的地址，如果地址正确就显示地址正确的图片，如果不正确图片就会加载失败 如果想要在图片加载失败时显示我们的默认图片，只需要img标签就可以搞定 这里需要了解一下img标签中的onerror ，onAbort，onLoad事件 onError：当图片加载出现错误，会触发 经常在这里事件里头写入 将图片导向默认报错图片，以免页面上出现红色的叉叉 onLo...
img 加载失败特定默认图片
weixin_50559423的博客
08-20 2375
本文讲解一个简单的问题，平常我们开发的时候难免用到标签。当图片src地址不存在 及 加载失败的时候，想给一张加载失败的图片。直接上代码。 第二种 在vue中 直接直接使用 @error事件 第三种 当你确认src 可能为空或者是错误时 给一个或的条件 以上就是 图片加载失败的 显示其它默认图片的处理。看完别忘记点赞哦，小二在此谢过了！
vue、uniapp利用onerror 事件处理img标签中的src图片加载失败
彭世瑜的博客
07-07 3389
如果 img标签中的src图片logo.png加载失败，原来的图片位置会被error.png 替换 <img src="logo.png" onerror="handleImageError()" /> <script type="text/javascript"> function handleImageError() { console.log(event); var img = event.target; img.src = "error.png"
优快云加载图片的问题
hellozmz的博客
04-11 480
这可以么
img标签的onerror事件来显示默认图片
BADAO_LIUMANG_QIZHI的博客
09-05 612
有时，img标签中的src图片加载失败，原来的位置会加载一个碎片化图标。 怎样可以设置一个加载失败时的默认显示图片那？ &lt;img width="50px" name=" " id=" " src=" " onerror="javascript:this.src=' ' "  onclick="goImage(this)"/&gt;&lt;/td&
uni-app image加载错误 404 替换为默认图片
zyue_1217的博客
07-19 2694
绑定图片src属性为aitem.cat_icon,
VUE：img标签加载图片失败时，显示一张自定义默认图片
热门推荐
干饭搬砖两不误。
07-29 1万+
关于img标签加载图片失败时，显示一张自定义的默认图片
uniapp、Vue中 image 如何设置默认图片，图片地址加载失败（404）的话就显示默认图片
weixin_46003019的博客
12-01 6223
一、解决方法（在单层循环中） HTML： 在image标签当中添加@error，用来监听图片地址加载失败，同时传递参数 <image v-else :src="item" mode="aspectFit" @error="imgerror($event, index)"></image> JS： imgerror(e, index) { this.xiangqingUrl.splice(index, 1) this.xiangqingUrl.splice(index, 0
uniapp实现加载图片失败显示占位图
yun199466的博客
08-11 7645
平常在项目中，我们会经常需要有加载网络图片的功能，但是存在图片地址问题、网络问题等导致图片加载失败，需要展示一个占位图，所以我这里总结了三种办法，仅供大家参考，写的不好大家见谅。 一、比较省事的就是导入第三方插件，本人没有使用过，所以不知道质量如何，大家有兴趣可以去详细研究下（传送门） 二、监听image标签的@error事件进行占位图的显示,这里我直接贴代码，大家看看逻辑即可明白。 注意：这里有点不好的就是一开始显示的都是空白的，只有图片加载成功或者失败后才会显示正常图片还是占位图 data里
uniapp图片组件（加载失败或者没有图片地址显示默认图片，含有点击图片预览功能）
清砾的博客
04-23 4343
imgbox.vue <template> <image :src="ImgSrc" :mode="eMode" @click="PreviewImg(ImgSrc)" @error="ErrSrc"></image> </template> <script> import { TanPreviewImage } from '@/utils/imageTools.js'; export default { name:"ImgBox
react项目设置img加载失败后，显示默认图片
最新发布
09-03
在 React 项目中，设置图片加载失败显示默认图片可以采用以下几种方法： ### 方法一：使用 `useState` 避免死循环 此方法借助 `useState` 来跟踪图片是否加载失败，仅调用一次 `onError` 函数，防止因默认图加载...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值