html ＜img/＞ src图片路径不存在，显示指定的默认图片

最新推荐文章于 2024-08-20 10:32:53 发布
最新推荐文章于 2024-08-20 10:32:53 发布
阅读量1.1k 收藏 1
点赞数
文章标签： html css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40425415/article/details/120127535
版权
本文介绍了在网页中如何优雅地处理图片加载失败的问题，包括使用HTML的`<img>`标签配合`alt`属性显示提示文字，以及通过`onerror`事件替换默认的错误提示图片。此外，还展示了如何在图片路径包含变量的情况下，利用Vue的`v-bind`和模板字符串动态设置错误图片。
摘要由CSDN通过智能技术生成

1. 图片加载失败，出现图片碎片和提示文字（不美观）

<img src="./xxx.jpg" alt="图片加载失败，显示提示文字">

2. 使用onerror事件指定一张提示错误的图片代替显示不了的图片

<img src="./xxx.jpg" onerror="this.src='./error.png'" alt="">

3. 若指定的图片路径存在变量，则使用v-bind结合模板字符串的方式实现

<img src="./xxx.jpg" :onerror="`this.src='./error${iconSize}.png'`" alt="">
油纸
关注
HTML三：字体＜font＞＜/font＞；段落＜p＞＜/p＞；注释＜!----＞；标题＜h1＞＜/h1＞；图片＜img src=‘‘＞；超链接＜a＞＜/a＞；锚点；列表（无序&有序）；
小枯林的博客
12-14 1865
●HTML部分主要了解HTML标签，其标签主要是字体、段落、注释、标题、图片、超链接、锚点、列表、表格、图表等。 这篇博客只要介绍：字体<font></font>，段落<p></p>，注释<!---->，标题<h1></h1>，图片<img src=''>，超链接<a></a>，锚点，列表的用法和注意事项。 1.字体<font></font> ...
HTML常用标签-----例如＜p＞＜img＞＜li＞等
qq_56798763的博客
07-04 972
1.HTML5头部结构 【DOCTYPE html】 声明文档类型为HTML5文件。 文档声明在HTML5文档必不可少，且必须放在文档的第一行。 【meta标签】 1.charset属性：单独使用，设置文档字符及编码格式。 写法：<meta charset="UTF-8"> 常见的中文编码格式： B-2312:国标码，简体中文 GBK：扩展的国标编码，简体中文 UTF-8:万国码 Unicode码，基本兼容各国语言文字 2.http-equiv属性：需配合c..
HTML 图片不存在则显示一个默认图片
08-10
NULL 博文链接：https://onestopweb.iteye.com/blog/2214451
html中加载不了图片,HTML中图片不存在显示默认图片的方法示例
weixin_35964164的博客
05-31 694
一个图片链接 想用js 判断url是否有效如果404 就加载默认的图片路径图片标签img的 onerror事件分析：特别注意 onerror，当图片不存在时，将触发 onerror，而 onerror 中为 img 指定一个默认图片。也就是说图片存在则显示 pic.gif，图片不存在将显示默认图片。存在的问题：如果默认图片也不存在，则继续触发 onerror，导致循环，故出现错误。如果图片存在，但...
img src路径不存在时，显示默认图片
weixin_30748995的博客
07-18 750
<img :src=" zftx ? zftx : ' ' " :onerror="defaultImg"/> import defaultImage from '@/assets/baseInfo.png'; 在script中通过import引入图片，defaultImg变量就是默认图片， 在vue变量的data里，定义defaultImg变量 ...
img 标签上的src 链接图片不存在时 怎么处理
weixin_30879833的博客
05-30 771
// .html <img [src]="nzSrc" *ngIf="nzSrc && hasSrc" (error)="imgError()"/> // .ts imgError(): void { // 没有图片时会触发 } 转载于:https://www.cnblogs.com/flxy-1028/p/10951375.h...
HTML 图像
seeleday的博客
09-14 516
实例 插入图像本例演示如何在网页中显示图像。从不同的位置插入图片本例演示如何将其他文件夹或服务器的图片显示到网页中。 （可以在本页底端找到更多实例。） 图像标签（）和源属性（Src） 在 HTML 中，图像由 标签定义。 是空标签，意思是说，它只包含属性，并且没有闭合标签。 要在页面上显示图像，你需要使用源属性（src）。src 指 "source"
img src图片路径不存在，则显示一张默认图片的方法
xiao白的博客
07-30 1899
　可以借用img标签的onerror事件，img标签支持onerror事件，在装载文档或图像的过程中如果发生了错误，就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。代码如下：　 <img src="images/logo.png" onerror="javascript:this.src='winter.png';" /> //onerror指定一张图片 //下面也是一种方法 当图片不存在时，将触发 onerror，而 onerror 中又为 img 指定一.
vue 使用＜img src＞加载图片的解决办法
蔡姐的博客
01-23 3631
最近使用<img src = “”>加载图片时候,遇到很多问题,现记录一下 一.assets和static的路径区别 assets:在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，如< img src=”./logo.png”>和background:url(./logo.png), 　 static：在这个目录下,文件不会被webpack处理,他会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件，任何放在sta
javascript动态改变img的src属性图片不显示的解决方法
10-28
总之，在使用JavaScript动态更改img的src属性时，应当注意不同浏览器的兼容性问题，特别是在旧版本的IE浏览器中，通过防止a标签的默认行为，可以有效地解决图片不显示的问题。同时，合理使用JavaScript和HTML的语义...
img图片不存在时设置默认图片
一名女程序猿的博客
06-01 1102
img设置是一个圆的样子，发现调取接口之后返回img路径是空，img显示是一个正方形，找了方法解决 当图片不存在时设置默认图片 <img src="图片的url地址" alt="图片XX"/> <img src="图片的url地址" alt="图片XX" onerror="this.style.display='none'"/> <img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址'"/> &l
HTML，img标签src路径错误及src路径图片无法显示问题，相对路径和绝对路径，超级详细的新手教程。
热门推荐
weixin_42868605的博客
06-01 4万+
今天在学习 做实例的时候 发现 img 标签里面的图片不显示， 结果是路径的问题，在这写下 路径的正确写法，方便以后查阅， 路径用 \ 或者 / 表示， 但是最后 图片名的时候 必须用 / 还有 路径前面的 两个点 不能漏掉 人生就像一只储蓄罐,你投入的每一分努力,都会在未来的某一天,回馈于你。而你所要做的,就是每天多努力一点. ...
img标签设置默认图片
qq_33539213的博客
11-15 4632
场景： 当获取图片路径或读取不到图片时，显示一张默认图片代替默认当图片碎片。 解决方法： 利用img标签的onerror事件。 当logo不存在时，将触发 onerror事件，而 onerror 中又为该 img 指定了defaultIcon图片。也就是说图片images/logo.png存在则显示logo，不存在将显示defaultIcon。 问题：如果defaultIcon 也不存在，则会...
关于html <img /> 标签中的 onerror
node的专栏
02-16 1269
img标签在使用的时候 一下几个事件非常的有用： onError：当图片加载出现错误，会触发 经常在这里事件里头写入 将图片导向默认报错图片，以免页面上出现红色的叉叉   onLoad：事件是当图片加载完成之后触发   onAbort：图片加载的时候，用户通过点击停止加载（浏览器上的红色叉叉）时出发，通常在这里触发一个提示：“图片正在加载” 正常情况下
img标签无图片或者图片url错误时显示默认图片
姚家威的博客
08-08 1656
这里是第一篇博客的内容
img标签设置默认src
HKing147的博客
03-18 516
img标签设置默认src
img src图片不存在，设置默认图片
fearlessnesszhang的博客
03-20 7406
 &lt;img :src="site.photo_url" onerror="this.src='../../images/user-photo.jpg'"/&gt;如果默认的图片也不能找到，则会一直请求（会造成内存溢出）所以需要进行处理。1.var webSocket = null;var lockReconnet = false;webSocket.onerror = function(){...
img 加载失败特定默认图片
最新发布
weixin_50559423的博客
08-20 518
本文讲解一个简单的问题，平常我们开发的时候难免用到标签。当图片src地址不存在 及 加载失败的时候，想给一张加载失败的图片。直接上代码。 第二种 在vue中 直接直接使用 @error事件 第三种 当你确认src 可能为空或者是错误时 给一个或的条件 以上就是 图片加载失败的 显示其它默认图片的处理。看完别忘记点赞哦，小二在此谢过了！
vue for循环时 使用require动态路径图片不存在怎么使用默认图片
06-02
可以在v-bind中使用三元表达式，判断当前图片是否存在，若不存在则使用默认图片路径。示例代码如下： ``` <template> <div> <div v-for="(item, index) in imgList" :key="index"> <img :src="item.imgUrl ? require(`@/assets/${item.imgUrl}`) : require('@/assets/defaultImg.png')" alt="图片"> </div> </div> </template> <script> export default { data() { return { imgList: [ { imgUrl: 'img1.png' }, { imgUrl: 'img2.png' }, { imgUrl: '' } ] } } } </script> ``` 以上代码中，`imgUrl`为空字符串时，会使用默认图片路径`require('@/assets/defaultImg.png')`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值