html之img中的src加载不出来的时候加载默认图片

最新推荐文章于 2024-07-04 18:29:34 发布

最新推荐文章于 2024-07-04 18:29:34 发布 · 7.2k 阅读

文章标签：

#php #人工智能 #开发工具

本文介绍了一种处理网页中<img>标签图片加载失败的方法，通过使用onerror事件来指定备用图片，确保页面不会因图片加载失败而出现问题，并提供了一个具体的实现示例。

需求：

<img>标签的 src加载不到的时候加载指定的默认图片

实现：

基于onerror，不过当onerror指定的src又加载不到的时候容易频繁onerror 从而导致溢出，那么就需要对onerror做修改

具体实现：

  <img src="http://linkrmb.com/static/common/img/bander.jpg" onerror="this.onerror='';this.src='http://www.linkrmb.com/static/common/img/wx.png'" width="531" height="384" border="0" alt="">

解释：

首先对onerror置空保证其只触发一次这样就避免Stack overflow

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dataee

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue中img src 动态加载本地json的图片路径写法

10-17

本文将深入探讨如何在Vue中使用`img`标签的`src`属性动态加载本地JSON文件中存储的图片路径。首先，重要的一点是，无论是本地JSON文件还是其中的图片URL，它们都应该放在`static`文件夹内。这是因为Vue CLI或...

图片img的src不变让浏览器重新加载实现方法

09-05

然而，当图片的`src`属性保持不变时，浏览器会默认从本地缓存中加载图片，而不是重新向服务器请求，以提高页面加载速度。这对于某些场景下可能不是我们期望的行为，比如图片更新后希望用户看到最新版本。这时，我们...

参与评论您还未登录，请先登录后发表或查看评论

HTML中的img标签中的src属性的路径问题：图片无法显示的原因及解决办法

热门推荐

m0_46594570的博客

02-08

1万+

HTML中的img标签中的src属性的路径问题：图片无法显示的原因及解决办法 img 标签使用格式语法： <img src="" alt="" title="" /> 其中的src涉及相对路径及绝对路径。图片无法显示的原因使用了绝对路径；相对路径使用时没有注意目录层之间的关系；解决办法很多编译器不能把图片的绝对路径解析出来，因此图片无法在网页中显示；当使用相对路径时，需要注意代码文件需要多少级才能与图片所在的文件夹属于同一级，比如图中HTML训练题文件夹与images文件夹同

html img标签图片路径错误时显示默认图片方法

weixing_fine的博客

11-20

1812

方法一：方法二：（新闻网这种做法）

百万前端之去除img标签出现的边框

qsadmjn的博客

09-19

5502

在html中，给img标签设置百分百自适应div大小时，就是出现一个默认边框，这是因为img标签在没有scr属性值时给自己添加一个默认边框，即使给img标签设置css属性border:none;就像上图一样，作为一个上传图片作为零时展示的图片img标签，出现了不合时宜的border框，显得非常的不美观。其实去除并不困难，原理也非常简单。相信大家看到了也是恍然大悟，竟然是opacity属性！给img添加这个css属性后，在img没有src属性时，img标签也不会出现边框了。

vue解决图片加载失败显示默认图片的方法

u010007013的博客

06-19

1万+

代码如下： defaultImg.js: function install(Vue, options = {}) { /** * 检测图片是否存在 * @param url */ let imageIsExist = function (url) { return new Promise((resolve) => { var img = new Image(); img.onload = function () { if (th

img图片加载失败时，展示默认图片的方法

A_xiaomingming的博客

05-23

8480

1、图片加载失败时会触发onerror事件，可以通过onerror事件使默认图片代替加载失败的图片 <img src="要展示的图片的地址" onerror="this.src='默认图片的地址'"> 2、如果默认图片也加载失败时，那么onerror事件会被循环触发，导致打开网页错误解决方案：保证默认图片一定能加载成功只执行onerror事件一次。 <img src...

img 加载网络图片失败显示默认图片的方法

08-30

img 加载网络图片失败显示默认图片的方法在 Web 开发中，加载网络图片失败是常见的问题之一。当从网络加载图片失败时，我们希望显示默认图片，以便提供更好的用户体验。今天，我们将讨论如何在 img 标签中显示默认...

如何让Vue中img的src在动态加载时不可见

最新发布

11-10

以下是具体的代码实现：运行程序后检查界面，发现没有显示预设的默认图片。进一步排查发现，图片未被正确打包导致了困惑。通过查阅相关资料得知，可以利用 require 引入图片处理模块。修改后的代码如下：至此，解决...

vue图片加载失败时用默认图片替换的方法

10-16

本篇文章将详细介绍如何在Vue中实现图片加载失败时用默认图片进行替换。首先，我们需要理解这个过程的基本原理。当图片加载失败时，浏览器会触发`error`事件。我们可以利用这个事件，在图片加载失败时，用预设的...

img标签的onerror事件来显示默认图片

BADAO_LIUMANG_QIZHI的博客

09-05

628

有时，img标签中的src图片加载失败，原来的位置会加载一个碎片化图标。怎样可以设置一个加载失败时的默认显示图片那？ <img width="50px" name=" " id=" " src=" " onerror="javascript:this.src=' ' " onclick="goImage(this)"/></td&

img图片不显示时设置默认图片

叶落无痕的博客

11-23

2471

img标签显示图片： <img src="url" alt="error txt" /> 当图片地址错误时，就是显示error txt，为了更好的用户体验，通常我们可以设置一张默认图片，当图片地址错误时，就显示该默认图片。 img是自闭合标签，所以一般不会去考虑使用伪元素before或after，但是，经过测试，在chrome68.0.3440.75上确实可以使用的，当图片地址正确时，该标签正常显示，before或after不生效，但是当图片错误时，img标签会变成一个双闭合标签，bef

Vue如何处理错误图片路径时换成另一张准备好的图片

ggq53219的博客

07-04

736

在Vue中处理错误图片路径（即当图片无法加载时）并替换为另一张准备好的图片，可以通过几种方式实现。

HTML img标签之onAbort、onError、onLoad事件与问题

iteye_1744的博客

07-25

756

img标签在使用的时候一下几个事件非常的有用： onError：当图片加载出现错误，会触发经常在这里事件里头写入将图片导向默认报错图片，以免页面上出现红色的叉叉 onLoad：事件是当图片加载完成之后触发 onAbort：图片加载的时候，用户通过点击停止加载（浏览器上的红色叉叉）时出发，通常在这里触发一个提示：“图片正在加载” 很好的利用这3个事件可以在HT...

iframe 监听内部接口是否加载完成_图片懒加载的前世今生

weixin_39551366的博客

12-01

325

一、前言通常情况下，HTML 中的图片资源会自上而下依次加载，而部分图片只有在用户向下滚动页面的场景下才能被看见，否则这部分图片的流量就白白浪费了。所以，对于那些含有大量图片资源的网站，会采用“按需加载”的方式，也就是当图片资源出现在视口区域内，才会被加载，这样可能会影响一丢丢用户体验，但是能大大节省网站的流量。而上述“按需加载”的方式就是今天的主角 -- 图片懒加载技术二、原理图...

图片(img标签)的onerror事件当图片无法加载时处理

麦兜的专栏

08-30

5778

经过分析，发现网页中存在类似如下的代码：分析：特别注意 onerror，当图片不存在时，将触发 onerror，而 onerror 中又为 img 指定一个 NoPic.gif 图片。也就是说图片存在则显示 pic.gif，图片不存在将显示 noPic.gif。但问题来了，如果 noPic.gif 也不存在，则继续触发 onerror，导致循环，故出现错误。说明：如果图片存

img 标签加载失败时默认图片设置

Triones

03-29

4268

在 img 标签加上onerror="onerror=null;src='123.jpg'" ,即当图片加载失败时会自动加载123.jpg ，例如参考：https://segmentfault.com/a/1190000005958514

img标签加载失败方法(onerror)、加载成功(onload)的方法、readystatechange事件、complete属性

yiyueqinghui的博客

05-20

1万+

1、error事件（img标签加载失败的方法） < img src=“123” :οnerrοr=“defaultImg()” /> function defaultImg(){ //地址错误时，直接删除img标签 this.remove() } 或者 function defaultImg(event){ //地址错误时，设置默认图片 let img = event.srcElement; img.src = ‘默认图片地址’; img.onerror

html如何让img为空时不显示

it_xin_shou的博客

05-31

9110

html如何让img为空时不显示可以使用onerror 事件来处理 1、如果你想在图片为空时要这张图片隐藏可以： < img src=“图片的url地址” οnerrοr=“this.style.display=‘none’”/> 2、如果你想在图片为空是显示默认图片可以： < img src=“图片的url地址” οnerrοr=“this.src=‘默认图片的url地址...

HTML中图片加载失败时显示默认图片的方法

一旦该图片加载失败，`onerror` 事件被激活，执行 `this.src='default.png'`，即将当前 `<img>` 元素的 `src` 属性修改为 `default.png`，从而加载默认图片。这种方式简洁高效，无需额外引入复杂的JavaScript框架，...