Nuxt3动态绑定图片路径失效问题求助

核心原因 #

Nuxt3的资源编译机制和Nuxt2不同：硬编码的图片路径会被Vite/Webpack自动解析转换，但动态绑定的字符串路径不会被编译工具识别处理，导致路径无法正确转换为构建后的实际地址。

具体解决方案 #

1. 迁移资源到public目录（推荐）

Nuxt3推荐将静态资源放在public目录下，该目录下的文件会被直接复制到构建产物的根目录，无需编译解析。

• 把static/img/work/下的图片移动到public/img/work/
• 修改数组中的路径为绝对路径：

data() {
  return {
    works: [
      { img: '/img/work/1.jpg', title: '作品1' },
      { img: '/img/work/2.jpg', title: '作品2' }
      // 其他项
    ]
  }
}

• 绑定src或背景图时直接使用：

<!-- img标签 -->
<img v-for="item in works" :key="item.title" :src="item.img" alt="">

<!-- 背景图 -->
<div v-for="item in works" :key="item.title" :style="{ backgroundImage: `url(${item.img})` }"></div>

2. 使用import.meta.resolve解析路径

如果需要保留static目录，可在定义数组时用import.meta.resolve手动解析路径：

data() {
  return {
    works: [
      { img: import.meta.resolve('@/static/img/work/1.jpg'), title: '作品1' },
      { img: import.meta.resolve('@/static/img/work/2.jpg'), title: '作品2' }
    ]
  }
}

此方法会在编译时将路径转换为构建后的实际地址，动态绑定即可正常加载。

3. 通过运行时配置拼接路径

适配多环境场景时，可借助useRuntimeConfig获取基础URL拼接路径：

• 在nuxt.config.ts中配置公共运行时变量：

export default defineNuxtConfig({
  publicRuntimeConfig: {
    baseURL: process.env.NUXT_PUBLIC_BASE_URL || '/'
  }
})

• 组件中使用：

const config = useRuntimeConfig()

data() {
  return {
    works: [
      { img: `${config.baseURL}static/img/work/1.jpg`, title: '作品1' },
      { img: `${config.baseURL}static/img/work/2.jpg`, title: '作品2' }
    ]
  }
}

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