有时我们项目里的图片加载错误时(比如 404),为了友好体验,我们可以用一张默认图片来替代。
方法一:用 background 遮住原图片
<img src="no-such-pic.png" />
img {
position: relative;
height: 200px;
width: 200px;
}
img::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://tse1-mm.cn.bing.net/th/id/OIP.0H0VxpTwhfJJImgf9jKbKQHaHa?w=212&h=212&c=7&o=5&pid=1.7') no-repeat;
background-size: 100% 100%;
}
注意:这个方法有兼容性问题,safari 浏览器下 background 图片会显示不出来,导致图片区域空白。
方法二:onerror + javascript
Javascript 写法:
<img src="no-such-img.com" onerror="this.src='default-image.png'">
<template>
<div id="app">
<img src="no-such-img.com" @error="setDefaultImage">
</div>
</template>
<script>
export default {
data() {
return {
message: 'Welcome to Vue!'
};
},
methods: {
setDefaultImage(e) {
e.target.src = 'default-image.png'
}
}
};
</script>
在 Vue 中定义原型方法,可以省略 methods 中的 setDefaultImage
Vue.prototype.setDefaultImage = function(e) {
e.target.src = 'default-image.png'
}