<img src="/UploadFiles/2021-04-02/someimage.png">

注意：需要将处理函数定义在head，防止图片加载出错时没有读取到处理函数
2. 使用jQuery监听error


// 通常不会再HTML里面内联js，可以使用.error对图片进行监听处理 
$('#test img').error(function() { 
 $(this).hide(); 
 // $(this).attr("src", "images/demo.png"); 
}); 



注意：jQuery加载需要在img前，处理函数需在img后
3. 使用函数处理


// 原生JS解决方案 
function $id(id) { 
 return !id || id.nodeType === 1 "color: #800000">1. 获取图片信息：图片是否可下载，图片宽高



image('img',{ 
 success : function () { alert(this.width + "-" + this.height); }, 
 failure : function () { alert('image 404!'); }, 
}); 
 
// 验证资源是否下载 
image('images/banner/banner_2.jpg', { 
 success : function () {console.log('sucess')}, 
 failure : function () {console.log('failure')}, 
 target : 'myContainerId', 
 insertBefore : 'someChildOfmyContainerId' 
}); 


2. 下载并插入图片


var report = $id('report'), 
 callback = { 
 success : function () { 
 report.innerHTML += '<p>Success - ' + this.src + ' ('+this.offsetWidth+'x'+this.offsetHeight+')</p>'; 
 }, 
 failure : function () { 
 report.innerHTML += '<p>Failure - ' + this.src + ' ('+this.offsetWidth+'x'+this.offsetHeight+')</p>'; 
 }, 
 target : 'target' 
 }; 
 
image('img', callback); 
image('images/banner/banner_2.jpg', callback); 


以上就是js针对图片加载时出现404问题的解决办法，希望大家有所收获。