Nuxt.js动态图片加载报错：Cannot find module './undefined.svg'

问题核心原因 #

报错本质是组件初始化阶段this.server.image还未拿到有效数据（处于undefined状态），此时直接拼接路径执行require，会生成~/assets/images/undefined.svg这个不存在的路径，导致webpack无法找到对应模块。

可行解决方案 #

方案1：计算属性中增加空值判断 #

在计算属性里先校验server.image是否存在，避免无效的require调用：

<img class="image" :src="imageSource" :alt="picture">

computed: {
  imageSource() {
    // 先判断server.image是否有有效值
    if (!this.server?.image) {
      // 可选：返回一张默认占位图，或者直接返回空字符串
      return require('~/assets/images/default.svg')
    }
    return require(`~/assets/images/${this.server.image}.svg`)
  }
}

方案2：用require.context预加载所有图片 #

借助webpack的require.context提前加载目标目录下的所有SVG图片，规避动态路径解析问题：

// 在组件内先创建图片上下文
const imageContext = require.context('~/assets/images/', false, /\.svg$/)

export default {
  computed: {
    imageSource() {
      if (!this.server?.image) return ''
      // 通过上下文直接获取对应图片资源
      return imageContext(`./${this.server.image}.svg`)
    }
  }
}

方案3：控制图片渲染时机 #

如果server数据是通过asyncData或fetch异步获取的，用v-if确保数据加载完成后再渲染图片：

<img 
  v-if="server?.image"
  class="image" 
  :src="require(`~/assets/images/${server.image}.svg`)" 
  :alt="picture"
>

补充提示 #

• Nuxt.js中动态图片路径需要webpack提前解析，不能直接拼接字符串作为src，必须通过require或require.context处理
• Nuxt里的~/和@/别名等价，使用时保持统一即可

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