前端解决图片404的问题

目前在做信息流列表的时候，需要点击不同的图片跳转不同的地址，

主要就是图片404的捕捉和替换备用图片

1.目前在用的，使用的是全集的错误捕捉

const basesrc = 'http://static.51gzdhh.xyz/2020-05-15/2/23da5ac3420d1f4b87790d0b91c690d1.jpg'  window.addEventListener('error', function(e) {if (e.target.tagName === 'IMG' && e.target.src.indexOf('51gzdhh.xyz') !== -1 && e.target.className === 'clickimg' && e.target.src !== basesrc) {console.log(e);console.log(e.target.src);e.target.src = basesrce.target.dataset.src = basesrc// e.error = null}}, true);

单独替换src的话，页面的图片会多次捕捉的错误，会闪烁，替换了下面的datatset的就解决了页面闪烁的问题，因为我使用了懒加载

2.直接再标签上添加onerror事件，

<img src="someimage.png" οnerrοr="imgerror(this);" />function imgError(image){$(image).hide();// $(this).attr("src", "images/demo.png");
}
//需要将处理函数定义在head，防止图片加载出错时没有读取到处理函数

如果使用的是模板字符串的方式添加进去的img，这个this指向的就是window，没法选择到当前标签，所以没法替换src，没有使用，但是应该原生的方法是可以的。

我是用的模板字符串，具体的监听代码如下

`<img src="" type="${type}" onerror=${imgError()} myindex='2' class='clickimg' data-src="${item.imgList[2]}" alt="">`function imgError() {var img = event.srcElement;console.log(img)console.log(img.src)img['data-src'] = "http://static.51gzdhh.xyz/2020-05-15/2/23da5ac3420d1f4b87790d0b91c690d1.jpg"; /*默认图片相对路径*/img.src = "http://static.51gzdhh.xyz/2020-05-15/2/23da5ac3420d1f4b87790d0b91c690d1.jpg"; /*默认图片相对路径*/console.log(img.src)img.οnerrοr = null; /*控制不要一直跳动*/// document.getElementById(e).setAttribute("src", "http://static.51gzdhh.xyz/2020-08-07/c/c9bd3f6444deccd4efde0720a960e10c.jpg?x-oss-process=image/resize,w_240,h_200")
}

这个也是可以解决的，但是需要在每个标签上都加上onerror方法，比较繁琐，所以推荐使用第一种，全局的方法。

3.使用jq

$('#test img').error(function() {$(this).hide();// $(this).attr("src", "images/demo.png");
});

但是这种方式，对于模板字符串也是监听不到的

前端解决图片404的问题相关推荐

前端展示图片404后使用onerror替换图片或其他变化
有时候从后台抓来的json中没有图片对应的路径或者没有对应的图片报错XXXX.jpg 404 这时候用onerror事件来对报错的img进行修改 <img id="" sr ...
前端解决图片跨域问题：net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin
前言项目中使用了从别的网站上面获取的图片url,在项目中展示报错 net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 200 从network中可以看到有请求报CO ...
前端解决图片在浏览器中旋转问题
在开始之前需要了解为什么在浏览器中图片会自动旋转,在一些相机设备中因手持方向的原因导致图片会有一个旋转角度,在浏览器中旋转角度被忽略了,导致图片看过去是旋转的图片旋转如下如图 1 正常 6 旋转9 ...
vue代码上传服务器后背景图片404解决方法
vue代码上传服务器后背景图片404解决方法参考文章: (1)vue代码上传服务器后背景图片404解决方法 (2)https://www.cnblogs.com/Mrrabbit/p/7830944 ...
前端解决：此图片来自微信公众平台未经允许不可引用
前端解决:此图片来自微信公众平台未经允许不可引用方法一: <meta name="referrer" content="no-referrer" /&g ...
vite+vue3打包后图片404问题：已解决
let content = [{title:"每周菜单",cont:[{url:"/procurementchildren/meke_menu",name:&q ...
前端如何解决图片太多加载资源慢的问题
前端如何解决图片太多加载资源慢的问题使用图片服务器使用图片懒加载 CSS sprites 使用图片服务器把图片服务器与应用服务器分开,图片服务器采用独立域名 ,css.js和图片就可以并发请求了 ...
object-fit 解决图片指定大小被压缩问题
object-fit 解决图片指定大小被压缩问题第一次遇到这个属性,是在给video 写 poster的时候,选取的作为poster的img的尺寸有点小,导致video播放器两边有留白.在控制台查看 ...
html图片左侧留白,HTML+CSS入门如何解决图片跨域导致的截图空白
本篇教程介绍了HTML+CSS入门如何解决图片跨域导致的截图空白,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1. 后端支持:图片要是cdn上的地址,并且允许图片跨域 ...

前端解决图片404的问题

主要就是图片404的捕捉和替换备用图片

前端解决图片404的问题相关推荐

最新文章

热门文章