vue项目设置img标签的默认图片

最新推荐文章于 2024-04-15 14:56:17 发布

原创最新推荐文章于 2024-04-15 14:56:17 发布 · 1w 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#img标签 #img标签添加默认图片 #默认图片

前端开发框架专栏收录该内容

23 篇文章

订阅专栏

本文介绍在Vue项目中如何正确设置img标签的默认图片，避免因资源缺失导致的堆栈溢出错误。通过使用Vue的computed属性和Webpack的require函数，确保默认图片能够被正确加载。

方法一：

首先看看以前（非vue）项目是怎么设置img标签的默认图片：

// 设置默认图片
<img src="http://res.spreadwin.com/gmc38PE.jpg" alt="" onerror="this.src='images/default.png'">

上面的方法一般时候没有问题，当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') + '"';
        }
    }
}

这样就可以了~