Vue3图片加载报错：Cannot find module，如何处理无效图片？

问题原因 #

你当前用require动态加载图片时，若图片不存在会直接抛出Cannot find module错误，而@error是DOM元素的事件，此时require在代码执行阶段就报错了，img元素的src未成功设置，所以事件无法触发。

解决方案 #

方案1：用try-catch包裹require #

写一个工具方法，尝试加载目标图片，失败则返回默认图的路径：

// 组件内的方法
methods: {
  getImageUrl(iconName) {
    // 先判断图片名是否为空
    if (!iconName) {
      return require('../../assets/icons/default.png')
    }
    try {
      return require(`../../assets/icons/${iconName}`)
    } catch (err) {
      // 加载失败时返回默认图
      return require('../../assets/icons/default.png')
    }
  }
}

模板中调用该方法：

<img :src="getImageUrl(element.icon)"
     class="avatar sm rounded-pill flex-shrink-0"
     alt="wrong image">

方案2：Vite环境下用import.meta.glob预检测图片（推荐） #

如果你的项目用Vite构建，可以预先获取所有存在的图标文件，避免运行时try-catch：

// 在组件内预先获取icons目录下的所有图片资源
const iconAssets = import.meta.glob('../../assets/icons/*.{png,jpg,svg}', { eager: true, as: 'url' })

export default {
  methods: {
    getImageUrl(iconName) {
      if (!iconName) {
        return iconAssets['../../assets/icons/default.png']
      }
      // 拼接目标图片路径
      const targetPath = `../../assets/icons/${iconName}`
      // 存在则返回对应URL，否则返回默认图
      return iconAssets[targetPath] || iconAssets['../../assets/icons/default.png']
    }
  }
}

模板用法同方案1。

方案3：将图片移至public目录，利用DOM的error事件 #

把所有图标（包括默认图）放到项目根目录的public/icons下，此时图片作为静态资源直接访问，不存在时浏览器会触发img的error事件：

模板代码：

<img :src="`/icons/${element.icon}`"
     @error="imageUrlAlt"
     class="avatar sm rounded-pill flex-shrink-0"
     alt="wrong image">

事件处理方法：

methods: {
  imageUrlAlt(event) {
    event.target.src = '/icons/default.png'
  }
}

这种方式无需处理模块加载错误，完全依赖浏览器的静态资源访问机制。

内容的提问来源于stack exchange，提问作者Jean-Loup