关于图片链接失效导致图片无法正常显示问题

对比图

在很多时候我们的图片链接失效了就导致图片无法正常显示,因此我们需要在图片无法正常显示的时候设置一张默认图片,这里我们使用到img标签上的error事件。

HTML代码

<template>
  <div class="home">
    <div class="home-content">
      <div class="home-box" ref="homeBox">
        <img :src="imgUrl" @error="handleError" alt="图片加载失败" />
      </div>
    </div>
  </div>
</template>

JavaScript代码

const imgUrl = ref("https://example.com/default-image.jpg");  // 失效图片
const imgUrl2 = ref("https://example.com/default-image.jpg");  // 默认图片

// 图片加载失败
const handleError = (event: Event) => {
  const target = event.target as HTMLImageElement;
  if (target) {
    target.src = imgUrl2.value;
    target.onerror = null; // 防止无限循环
    console.log(event, "图片加载失败");
  } else {
    console.error("event.target 为 null");
  }
};