Nuxt.js 3中使用相对路径加载图片遇到问题

在Nuxt 3中直接绑定@/assets开头的字符串路径时，webpack不会自动解析该路径为可访问的绝对URL，导致图片无法加载，而且Nuxt 3已经废弃了Vue 2中的require方法，下面提供几种可行的解决方案：

方法1：使用new URL()动态解析路径 #

这是原生ES模块的方式，兼容性好，无需依赖Nuxt特定API。

修改模板写法 #

直接在img标签的:src中用new URL()构建正确的URL：

<img class="object-cover" :src="new URL(people.profil_path, import.meta.url).href" :alt="`Photo of ${people.name}`">

注意：需要把team数组中的profil_path修改为相对于当前组件文件的路径，比如你的组件在components/Team.vue，图片在assets/img/profil-placeholder.jpg，那么路径应写成../assets/img/profil-placeholder.jpg，而非带@/的写法。

脚本预处理路径（可选） #

如果不想修改模板，也可以在组件中预先处理所有成员的图片路径：

export default {
  data() {
    return {
      team: [
        {
          name: "John Doe",
          title: "",
          arts: "",
          palmares: "",
          profil_path: "../assets/img/profil-placeholder.jpg"
        },
        // 其他团队成员数据
      ]
    }
  },
  computed: {
    processedTeam() {
      return this.team.map(person => ({
        ...person,
        profil_path: new URL(person.profil_path, import.meta.url).href
      }))
    }
  }
}

之后模板中循环processedTeam即可：

<div v-for="people in processedTeam" :key="people.name" class="card m-auto mb-4 p-4 bg-white border rounded-md w-full md:w-1/2 lg:w-1/3 xl:w-1/4">

方法2：使用Nuxt 3内置的useAsset API #

Nuxt 3提供了useAsset组合式API，可自动将~/或@/开头的路径解析为正确的URL。

<script setup>语法写法 #

<script setup>
import { useAsset } from '#app'

const team = [
  {
    name: "John Doe",
    title: "",
    arts: "",
    palmares: "",
    profil_path: useAsset('~/assets/img/profil-placeholder.jpg')
  },
  // 其他团队成员数据
]
</script>

模板中直接使用:src="people.profil_path"即可，无需额外修改。

Options API写法 #

如果使用Options API，可在created钩子中批量处理路径：

export default {
  data() {
    return {
      team: [
        {
          name: "John Doe",
          title: "",
          arts: "",
          palmares: "",
          profil_path: "~/assets/img/profil-placeholder.jpg"
        },
        // 其他团队成员数据
      ]
    }
  },
  created() {
    this.team.forEach(person => {
      person.profil_path = this.$useAsset(person.profil_path)
    })
  }
}

备选方案：将图片移至public目录 #

如果不需要webpack对图片进行压缩、哈希命名等处理，可将图片放在项目根目录的public文件夹下（比如public/img/profil-placeholder.jpg），此时直接用:src="'/img/profil-placeholder.jpg'"绑定路径即可，Nuxt会自动处理为绝对URL。

内容的提问来源于stack exchange，提问作者Péah