img标签的属性有:
src:图片路径
width:宽度
height:高度
title:鼠标悬停在图片时显示的文字内容
alt :用来告诉浏览器当需要显示的图片找不到时显示的内容
当src中的资源不存在或无法正常访问时,需要显示默认图片“default.png”。但是当onerror中设置的图片路径也不存在时就会导致浏览器一直加载这个图片资源,造成堆栈溢出错误。为了完善我们通常在后面加上this.οnerrοr=null;保证onerror里的事件只执行一次,如下:
// 设置默认图片
<img src="http://res.spreadwin.com/gmc38PE.jpg" alt="" onerror="this.src='images/default.png';this.onerror=null">
如果我们在vue项目同样这么设置,会发现无效(默认图片不显示)。原因是webpack打包时找不到资源文件,需要用到下面的方法。
// 内容
<img :src="item.url" alt="" :onerror="defaultImg">
// js
export default {
...
computed: {
defaultImg () {
return 'this.src="' + require('images/default.png') + '"';
}
}