NuxtJS项目访问assets文件夹内本地图片无法正常加载问题求助

问题根因 #

Nuxt 中~/assets/开头的别名路径，仅在模板静态属性、CSS静态url、以及主动调用require（webpack环境/Nuxt2）/new URL(..., import.meta.url)（vite环境/Nuxt3）时才会被构建工具解析打包，直接在JS字符串中书写不会被识别，因此浏览器无法加载对应资源。

修复方案 #

方案1：主动引入assets目录资源（推荐，可走构建资源压缩、hash重命名优化） #

Nuxt2（webpack环境）修改脚本逻辑如下：

<script>
export default {
  computed: {
    imageSource() {
      // 远程图片直接返回
      if(this.src?.startsWith('http') || this.src?.startsWith('//')) return this.src
      // 本地图片用require引入
      if(this.src?.match(/\.(jpeg|jpg|gif|png)$/)) {
        // 注意require参数必须包含静态前缀，不可全为动态变量
        return require(`~/assets/images/${this.src}`)
      }
      // 默认图主动引入
      return require('~/assets/images/covers/default-cover.jpeg')
    }
  }
};
</script>

Nuxt3（vite环境）修改为对应写法：

return new URL(`~/assets/images/covers/default-cover.jpeg`, import.meta.url).href

方案2：使用public目录存放公共静态资源 #

将图片放到项目根目录的public文件夹下，比如路径调整为public/images/covers/default-cover.jpeg，直接使用绝对路径引用即可，无需别名解析：

defaultCoverImage: '/images/covers/default-cover.jpeg'

注意事项 #

动态绑定style的background-image时，建议给url参数加单引号包裹，避免路径含特殊字符时解析失败：

<template>
  <div class="background-image" :style="`background-image: url('${imageSource}')`">
  </div>
</template>

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