图片img标签设置默认图片

1、让图片元素隐藏
2、设置默认图

用户头像，默认商品图等。img的alt属性只是给图片设置未加载时的文字提示信息。这时，通常会用到onerror属性，一下为常用的两种方法

1、让图片元素隐藏

<img src="图片的url地址" alt="图片XX" onerror="this.style.display='none'"/>

2、设置默认图

<img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址'"/>

第二种方式为常用的方法，但当onerror中设置的图片路径也不存在时就会导致浏览器一直加载这个图，造成堆栈溢出错误。
通常在后面加上 this.οnerrοr=null; 保证onerror里的事件只执行一次。所以完整的写法为：

<img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址';this.οnerrοr=null"/>

图片img标签设置默认图片相关推荐

img标签设置默认图片
场景: 当获取图片路径或读取不到图片时,显示一张默认图片代替默认当图片碎片. 解决方法: 利用img标签的onerror事件. 问题:如果defaultIcon 也不存在,则会继续触发 onerror ...
vue项目设置img标签的默认图片
方法一: 首先看看以前(非vue)项目是怎么设置img标签的默认图片: // 设置默认图片 <img src="http://res.spreadwin.com/gmc38PE.jpg ...
设置img标签的默认图片
img标签的属性有: src:图片路径 width:宽度 height:高度 title:鼠标悬停在图片时显示的文字内容 alt :用来告诉浏览器当需要显示的图片找不 ...
html 如何设置选择图片,html中如何设置默认图片？
前言大家可能都知道img标签是怎么设置默认图片的,但是你知道background-img是如何设置默认图片的嘛? img 这里是应用了img标签的``事件,当加载失败就用默认图片地址.但是这里可能出 ...
【CSS】滑动门技术 ( 借助 CSS 精灵技术实现 | 外部标签设置左半部分背景图片 | 内部标签设置右半部分背景图片 | 鼠标经过更换背景 | 代码示例 )
文章目录一.滑动门技术 1.滑动门技术借助 CSS 精灵技术实现 2.外部标签设置左半部分背景图片 3.内部标签设置右半部分背景图片 4.鼠标经过时更换背景二.完整代码示例一.滑动门技术 1.滑 ...
微信小程序开发——设置默认图片、错误加载图片
wxml: <image src='{{imgArr[index]==""?defaultImg:imgList[index]}}' binderror="erro ...
img请求图片错误设置默认图片
当图片地址存在但无效时,给它设置默认图片或者不显示 1.让这个图片元素隐藏: <img src="图片的url地址" alt="图片XX" onerror ...
img图片不存在时设置默认图片
img设置是一个圆的样子,发现调取接口之后返回img路径是空,img显示是一个正方形,找了方法解决当图片不存在时设置默认图片 <img src="图片的url地址" alt ...
当图片404时显示默认图片
当图片404时显示默认图片 1.当图片未找到时或者404时,触发onerror显示其中的图片 eg: <img src="当前图片的地址" onerror="thi ...

图片img标签设置默认图片

图片img标签设置默认图片

1、让图片元素隐藏

2、设置默认图

图片img标签设置默认图片相关推荐

最新文章

热门文章