位置:首页 > Vue >

vue img标签:onerror="defaultImg"或@error=“defImg()” 使用

字号+ 作者:micloud 来源:www.seoalphas.com 2021-09-28 16:01 浏览量:1539

一个正常的img标签如下:

<img class="img" src="/static/images/default.png" rel="" alt="" >

这种情况,如果图片路径正确会显示出来,如果路径错误就显示不出来,体验非常不好;通常我们处理的方式是给一个默认的图片,当没有图片显示时,就显示默认的图片。

于是就有了下面的代码

<img class="img" rel="" alt="" src="/static/images/default.png" :onerror="defaultImg" />
<img class="img" :src="/static/images/default.png" @error="defImg()" />
export default {
    data () {
        return {
            defaultImg: 'default.png',
        }
    }
}
 defImg(){
     let img = event.srcElement;
     img.src = this.defaultImg;
     img.onerror = null; //防止闪图
 }


1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • vue点击事件@click.stop(阻止冒泡).native

    vue点击事件@click.stop(阻止冒泡).native

    浏览次数:7982

  • Vue+Element UI Radio默认选中问题 selected

    Vue+Element UI Radio默认选中问题 selected

    浏览次数:5714

  • vue设置网页页面title--router

    vue设置网页页面title--router

    浏览次数:2168

  • vue的computed计算属性

    vue的computed计算属性

    浏览次数:1532

网友点评
评论区域