图片加载失败时渲染默认图片

方法一、

在img标签中加入onerror属性：

<img src="不存在的图片路径" onerror="src='img/timg1.jpg'"/>

注：这种方法中，若onerror中默认路径错误的话，会不断重新加载，也就是可能会不断闪。所以可在onerror中写法如下：

<img src="不存在的图片路径" onerror="this.onerror='';src='img/timg1.jpg'"/>

其中多添加了this.οnerrοr=''; 即onerror触发时，将onerror内容清空，若是默认图片路径也错误，也就直接显示错误了。

 

方法二、

使用jQuery中bind函数，事件为“error”，代码如下：

/**
 * 图片加载不出显示默认图
 * @param {Object} obj  图片对象，即$('#id')
 */
function defaultImage(obj,thisUrl) {
	/*加载图片失败回调函数;*/
	obj.bind("error", function() {
		/*判断是否有传入默认图片地址，有就使用，没有便直接默认*/
		if(thisUrl) {
			obj.attr("src",thisUrl);
		}else {
			obj.attr("src", 'default.jpg');
		}
	});
}

使用：

defaultImage($('#imgId'),'img/timg1.jpg');

注：调用时图片应该是动态渲染的，即在调用前应该是有修改图片路径的情况，如下：

$('#imgId').attr('src',imgUrl);
defaultImage($('#imgId'),'img/timg1.jpg');

若在html中img标签便带图片路径，当图片路径错误时，初始化调用这默认渲染函数是没有效果的。

 

vue中默认渲染：

加‘:onerror’属性：

<img :src="imgUrl" :onerror="defaultImg" />

在data()中写defaultImg值，如下：

data() {
  return {
    imgUrl: 'img.jpg',
    defaultImg : 'this.src="' + require('img.png') + '"'
  }
}