前端如何在图片触发404错误时跳过该图片

算力阿峰

2026-6-22

Vue中动态加载图片时检测404并隐藏失效图片

可以通过监听图片的error事件，结合Vue的数据绑定标记图片有效性，再用v-if控制是否显示。以下是两种实现方式：

方式一：直接在模板中处理

<template>
  <div v-for="(n, index) in 5" :key="index">
    <img 
      v-if="validImages.includes(n)" 
      :src="`image_url_${n}.jpg`" 
      @error="handleImageError(n)"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      validImages: [1, 2, 3, 4, 5] // 初始默认所有图片有效
    }
  },
  methods: {
    handleImageError(n) {
      // 加载失败时移除对应编号，v-if会自动隐藏该图片
      const idx = this.validImages.indexOf(n)
      if (idx !== -1) {
        this.validImages.splice(idx, 1)
      }
    }
  }
}
</script>

方式二：封装成可复用组件（推荐）

先创建图片组件ValidImage.vue：

<template>
  <img 
    v-if="isValid"
    :src="src" 
    @error="isValid = false"
  />
</template>

<script>
export default {
  props: ['src'],
  data() {
    return {
      isValid: true
    }
  }
}
</script>

再在父组件中使用：

<template>
  <div v-for="(n, index) in 5" :key="index">
    <ValidImage :src="`image_url_${n}.jpg`" />
  </div>
</template>

<script>
import ValidImage from './ValidImage.vue'

export default {
  components: {
    ValidImage
  }
}
</script>