如何在前端出现 404 错误时跳过 URL 图像

Question

我想基于

image_url_1.jpg

动态实现图像（

image_url_5.jpg

-

URL

）。一切正常，但如果发生这种情况，例如“image_url_4.jpg”不可用（404 错误），损坏图像的符号始终显示 - 逻辑上。

是否可以检查我的

v-for

错误 404 或者是否可以显示图像？如果没有，请使用

v-if

跳过它。

我已经尝试过

require(url)

但这对我不起作用。

代码示例

<template>
  <div v-for="(n, index) in 5" :key="index">
    <img :src="'image_url_' + n + '.jpg'" />
  </div>
</template>

用图片可视化：

Answer 1

HTML 元素有一个

error

事件：(MDN Web 文档)

当资源加载失败或无法使用时，将在元素上触发错误事件。例如，如果脚本执行错误或找不到图像或无效。

实现起来很容易：(demo)

<script setup lang="ts">
import { ref } from 'vue';

const num = 4;
const show = ref(new Array(num + 1).fill(true)); // using "of" in v-for, index starts from 1

function handleError(index) {
  show.value[index] = false;
}
</script>

<template>
  <template v-for="index of num">
    <div v-if="show[index]">
      <img :src="`/images/${index}.png`" @error="handleError(index)" />
    </div>
  </template>
</template>