Vue3中如何在图片URL加载失效时自动替换<img>的src属性为默认值

方案一：原生事件直接绑定（最轻量，优先推荐） #

无需引入任何依赖、无需额外封装逻辑，直接绑定img原生error事件即可，性能开销极低，完美适配v-for大量渲染的场景：

<template>
  <!-- 表格v-for循环逻辑 -->
  <tr v-for="item in tableList" :key="item.id">
    <td>
      <img 
        :src="item.onlineImgUrl" 
        alt="资源预览"
        <!-- 加载失败直接替换为默认图地址 -->
        @error="e => e.target.src = '/assets/default-fallback.png'"
      >
    </td>
  </tr>
</template>

方案二：全局自定义指令（复用性高，适合多页面使用） #

如果项目多模块都需要用到默认图替换逻辑，可以封装全局指令统一管理，后续修改默认规则只需要调整一处代码：

1. 首先在入口文件注册全局指令

// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.directive('fallback', {
  mounted(el, binding) {
    // 支持传入自定义默认图，无传入则使用全局预设默认图
    const defaultUrl = binding.value || '/assets/default-fallback.png'
    el.addEventListener('error', () => {
      el.src = defaultUrl
    })
  }
})
app.mount('#app')

2. 模板中直接使用指令即可

<img 
  :src="item.onlineImgUrl" 
  alt="资源预览"
  v-fallback <!-- 无参数用全局默认图 -->
  <!-- 也可以传入自定义默认图地址：v-fallback="'/assets/custom-fallback.png'" -->
>

方案三：保留原有jQuery方案（不推荐，仅做兼容参考） #

如果要复用之前的jQuery代码，需要在列表DOM渲染完成后再绑定事件：

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import $ from 'jquery' // 需提前安装jQuery依赖：npm install jquery

const tableList = ref([])
// 接口获取表格数据
const getTableData = async () => {
  const res = await yourFetchApi()
  tableList.value = res.data
  // 等待列表DOM渲染完成后绑定error事件
  await nextTick()
  $('img').on("error", function() {
    $(this).attr('src', 'fallbackURL')
  })
}

onMounted(() => {
  getTableData()
})
</script>

注意：该方案存在缺陷，每次表格数据更新重新渲染后都需要重新绑定事件，且引入jQuery会额外增加打包体积，非特殊兼容场景不建议使用。

内容的提问来源于stack exchange，提问作者jeff3546