Nuxt 3动态图片路径不显示、require报错问题求助

问题根源 #

Nuxt 3 基于 Vite 构建，不再支持 Webpack 时代的 require 语法；直接使用相对路径（如../assets/images/${director.image}）会因为编译后资源路径发生变化，导致浏览器无法正确解析资源位置。

解决方案 #

方案1：用 new URL() 动态生成正确路径

修改模板中的图片绑定：

<img :src="getImageUrl(director.image)" :alt="director.name">

在组件的methods中添加路径处理方法：

data() {    
 return {       
  directors: [         
   { image: "directorsImg1.png" },         
   { image: "directorsImg2.png" },        
   { image: "directorsImg3.png" }       
  ],
  selectedDirector: null,
  showModal: false
 };   
},   
methods: {     
 getImageUrl(imageName) {
  return new URL(`../assets/images/${imageName}`, import.meta.url).href
 },
 toggleModal(director) {       
  this.selectedDirector = director;       
  this.showModal = !this.showModal;     
 }   
}

import.meta.url 代表当前组件模块的URL，new URL() 会自动将相对路径解析为编译后的绝对资源路径，适配Vite的资源打包规则。

方案2：批量导入图片（多图片场景更高效）

通过import.meta.glob批量导入目标目录下的所有图片，直接在数据中使用编译后的URL：

data() {    
 // 批量导入assets/images下的所有png图片
 const images = import.meta.glob('../assets/images/*.png', { eager: true })
 return {       
  directors: [         
   { image: images['../assets/images/directorsImg1.png'].default },         
   { image: images['../assets/images/directorsImg2.png'].default },        
   { image: images['../assets/images/directorsImg3.png'].default }       
  ],
  selectedDirector: null,
  showModal: false
 };   
},   
methods: {     
 toggleModal(director) {       
  this.selectedDirector = director;       
  this.showModal = !this.showModal;     
 }   
}

模板中直接使用已处理好的路径：

<img :src="director.image" :alt="director.name">

import.meta.glob 会匹配指定路径下的所有资源，eager: true 表示立即导入资源，每个资源的default属性即为编译后的有效URL。

注意事项 #

硬编码_nuxt/assets/images/${director.image}虽然能临时生效，但_nuxt是编译后的固定目录，若后续修改项目资源配置或部署路径，该写法会失效，不推荐使用。

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