Vue.js中动态绑定~@/assets格式图片路径无法显示的解决方法

静态写法<img src="~@/assets/img/test.png">可正常显示，是因为Vue CLI的webpack构建流程会在编译阶段静态扫描模板内的路径写法，自动完成别名解析、资源打包映射。
当把带~@/前缀的路径字符串存在变量中，通过动态绑定:src渲染时，webpack的静态扫描逻辑无法识别动态变量内部的路径内容，不会对这部分字符串做编译期转译。最终浏览器收到的是字面量的~@/assets/xxx.png字符串，自然无法完成资源加载。

• 方案1：通过require触发webpack的资源解析逻辑
  把变量中存储的路径字符串用require方法包裹，让构建流程识别对应资源路径，返回打包后的真实可访问地址：

  // 组件script部分示例
  data() {
    return {
      items: [
        {
          // 替换原来直接存路径字符串的写法
          templateImg: require('@/assets/img/test.png')
        }
      ]
    }
  }
  

  注意：require内的路径需要保留可被webpack静态分析的固定片段，不能完全使用无规律的全动态拼接字符串，否则依然会触发解析失败。如果需要循环批量加载同目录下的图片，可以采用require(固定目录片段 + 动态文件名)的写法，只要保留固定目录片段，webpack就能正常完成资源解析
• 方案2：将动态引用的资源放到public目录
  public目录下的文件不会经过webpack的打包转译流程，构建后会直接映射为站点根路径下的静态资源。把图片移动到public/assets/img/目录后，变量中直接存储从根路径开始的相对地址即可，无需加~@前缀：

  data() {
    return {
      items: [
        {
          // 对应public目录下的文件访问路径
          templateImg: '/assets/img/test.png'
        }
      ]
    }
  }
  

• 方案3（Vite构建项目适用）：通过new URL配合import.meta.url加载资源
  如果是Vite构建的Vue项目，可以用内置的URL解析逻辑加载assets目录下的资源，拿到的地址直接赋值给动态绑定的src属性即可正常显示。注意这里的相对路径是相对于当前写这段代码的文件位置书写，不需要加@别名前缀：

  // 示例：当前文件在src/views目录下，引用assets目录的图片时的相对路径写法
  const imgUrl = new URL('../assets/img/test.png', import.meta.url).href
  

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