Vue v-for渲染列表时本地assets目录背景图不显示问题咨询

你在动态绑定的行内样式字符串中直接书写./assets/xxx.jpg的相对路径，完全绕过了Vue构建工具对静态资源的编译转换流程：

• 构建工具（Vue CLI/Webpack/Vite）只会识别模板、脚本中显式通过import、require、原生模板标签属性引用的本地资源，自动将其转译为构建后带哈希值的实际可访问公共路径
• 直接写在行内CSS字符串里的相对路径，最终会被浏览器作为运行时的字面量路径处理，指向当前页面域名下的同级相对路径：
  • 本地开发环境下，assets目录的文件是被dev server做内部路径映射的，并没有暴露在网站根路径下，写的相对路径实际请求地址和dev server暴露的实际资源地址不匹配，直接404
  • 项目打包上线后，assets下的资源会被输出到带哈希命名的静态资源路径下，根本不存在字面量的./assets目录，同样会404
• 你测试用的网络https图片是绝对远程地址，不需要经过本地编译转换，浏览器可直接远程拉取，因此可以正常显示

另外补充路径认知误区：assets目录下的资源默认是参与构建编译、做缓存优化的，不会像public目录的文件那样原样输出到打包产物根目录，直接写字面量相对路径必然找不到文件。

• 方案1：提前在脚本中显式导入本地图片，使用构建工具返回的有效资源路径赋值。示例：

  // script顶部导入资源，构建时自动处理路径，返回可访问的最终地址
  import stitchingBg from '@/assets/StitchingFairyBackground.jpg'
  
  export default {
    data() {
      return {
        portfolioListData: [
          {
            // ...其他业务字段
            backgroundImg: {
              backgroundImage: `url(${stitchingBg})`
            }
          }
        ]
      }
    }
  }
  

• 方案2：若图片不需要参与构建优化，可将其移至public静态资源目录，路径使用根绝对路径书写，构建时该目录文件会原样输出到产物根目录，可直接访问。
• 方案3：Vite构建项目可通过内置的URL构造语法处理资源路径，无需提前逐个导入：

  backgroundImg: {
    backgroundImage: `url(${new URL('./assets/StitchingFairyBackground.jpg', import.meta.url).href})`
  }
  

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