图片地址自检是否损坏或无效

最新推荐文章于 2026-03-02 00:05:20 发布

原创最新推荐文章于 2026-03-02 00:05:20 发布 · 556 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端 #html

收录于

vue.js 同时被 2 个专栏收录

61 篇文章

订阅专栏

html

9 篇文章

订阅专栏

在前端项目中，为防止图片链接失效或图片损坏，通常需要进行图片地址自检。本文介绍如何为图片添加自检方法，确保在链接无效或图片损坏时能够显示默认图片。

图片地址自检是否损坏或无效

在项目中一般图片链接为空或者undefined的情况下，会展示一张默认图，但是当图片有链接的情况下，可能会出现链接地址无效或者图片已损坏，这时我们给图片添加自检方法，如下所示：

<template>
  <div>
    <img
      :src="appImg ? appImg : '/images/app/app17.png'"  //appImg为空时显示默认图片
      alt=""
      @error="imageUrlAlt"  //appImg链接地址损坏或者无效时显示默认图
    />
  </div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {
      appImg: "https://img-home.csdnimg.cn/images/20201124032511.png",
    };
  },
  mounted() {},
  methods: {
    imageUrlAlt(event) {
      event.target.src = "/images/app/app17.png";
    },
  },
};
</script>
<style lang='scss'>
</style>