Vuetify中v-img用require加载缺失资源导致应用崩溃怎么解决？

问题根本原因 #

require是webpack/vite等打包工具的编译期静态语法，不是运行时API。如果传入的路径不存在，打包阶段就会直接抛出错误终止编译，根本不会进入代码运行阶段。你之前尝试的或运算符、try-catch、placeholder插槽都是运行时逻辑，自然无法触发。

可行解决方案 #

方案1：使用public目录静态资源（最简便）

把所有图片资源放到项目根目录的public文件夹下，不需要用require包裹路径，直接写字符串路径即可。打包工具不会处理public下的资源，资源不存在只会触发运行时加载错误，不会导致编译崩溃，配合v-img的error插槽就能实现兜底。

<!-- 图片存放在 public/some-folder/my-img.png -->
<v-img src="/some-folder/my-img.png">
  <template v-slot:placeholder>
    <!-- 加载中占位组件 -->
  </template>
  <template v-slot:error>
    <!-- 加载失败兜底组件 -->
  </template>
</v-img>

如果不需要对图片做编译期压缩、hash重命名等处理，优先选择该方案。

方案2：预生成静态资源映射表

如果图片必须放在src目录下走打包编译逻辑，提前把所有可能用到的图片导入生成固定映射表，运行时根据key取值，不存在就返回兜底图。

// 提前导入所有需要用到的图片
const imageMap = {
  'my-img.png': require('@/some-folder/my-img.png'),
  'img-2.png': require('@/some-folder/img-2.png'),
  // 兜底默认图
  'default': require('@/assets/default-img.png')
}

export default {
  methods: {
    getImage(imgName) {
      return imageMap[imgName] || imageMap.default
    }
  }
}

<v-img :src="getImage('my-img.png')" />

所有require路径都是编译期固定的，不会出现路径找不到的编译错误。

方案3：批量导入生成映射表

如果图片数量较多手动写映射麻烦，可以用require.context批量导入自动生成映射表：

// 批量读取@/some-folder下所有png文件生成映射
const imageContext = require.context('@/some-folder/', false, /\.png$/)
const imageMap = {}
imageContext.keys().forEach(key => {
  const fileName = key.replace('./', '')
  imageMap[fileName] = imageContext(key)
})
const defaultImg = require('@/assets/default-img.png')

export default {
  methods: {
    getImage(imgName) {
      return imageMap[imgName] || defaultImg
    }
  }
}

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