图片加载不出时，使用默认图片代替

最新推荐文章于 2023-08-31 21:30:21 发布

菜鸟hang小芒

最新推荐文章于 2023-08-31 21:30:21 发布

阅读量400

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/Hxmang/article/details/127898358

版权

img标签图片加载不出来时，使用onerror属性
HTML写法：

<img src="../abc/1.png" onerror="this.src=defaultImg">

vue写法

<template>
  <div>
    <div>
      <img :src="imgUrl" @error="setDefaultImg" />
      <button @click="dianji" class="anniu">按钮</button>
    </div>
  </div>
</template>

<script>
import defaultImg from "../pages/first.png";
export default {
  name: "Count",
  data() {
    return {
      imgUrl:
        "https://img1.baidu.com/it/u=2971221284,3933528905&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1668790800&t=5a34ff095a34649798014dc47844c283"
    };
    console.log(e);
  },

  methods: {
    setDefaultImg(e) {
      e.target.src = defaultImg;
    },

    dianji(e) {
      console.log(e.target.class);
    }
  }
};
</script>

<style>
</style>