当前位置：网站首页>img图片加载错误时显示默认图片

img图片加载错误时显示默认图片

2022-08-11 11:38:00 【小太阳...】

JavaScript用的onerror事件，vue用的@error
JavaScript写法

<img src="xxx" onerror="this.src='default-image.png'">

vue写法：

<img :src="img_in" @error="setDefaultImage">
import bgWhite from '@/assets/images/bg-white.png';
export default {
    
  data() {
    
    return {
    
      img_in: bgWhite, // 加一个白色背景图，就是在加载图片的时间避免闪一下上次的图片
      defaultImg:require('@/assets/images/remote-default-img.png'),
    };
  },

  methods: {
    
    // 接口获取图片
    showImgDialog( {
    
        this.img_in = xxxx;
    },
    // 加载失败设置默认图片
    setDefaultImage(e) {
    
      e.target.src = this.defaultImg
    },
  },
};
原网站

版权声明
本文为[小太阳...]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_46074961/article/details/126224368

边栏推荐

猜你喜欢

随机推荐