场景:当获取图片路径或读取不到图片时,显示一张默认图片代替默认当图片碎片。
解决方法:利用img
标签的onerror
事件。
问题:如果defaultIcon
也不存在,则会继续触发onerror
事件,导致死循环,故会出现打开网页时提示Stack overflow at line: 0
错误。特别说明:如果图片存在,但网络很不通畅,也可能触发 onerror事件。
解决方法:控制它不循环。
ps:按照网上的做法写onerror
提示这个属性不存在,让我改成onError
更新:onerror 事件会在文档或图像加载过程中发生错误时被触发。在装载文档或图像的过程中如果发生了错误,就会调用该事件句柄。发生错误的前提是发起网络请求,即当src
为undefined
或null
时不会触发,这种情况还需要另外去判断。
最终写法:
<imgsrc={logo||defaultIcon}alt="图标"onError={e => {// 替换的图片e.target.src = defaultIcon;// 控制不要一直触发错误e.onError = null;}}/>
如果觉得《img标签设置默认图片》对你有帮助,请点赞、收藏,并留下你的观点哦!