设置img标签的默认图片

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') + '"';
        }
    }

 

        

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值