Vue cli 3项目，图像路径中的动态src不起作用

Posted 2023-02-22

【中文标题】Vue cli 3项目，图像路径中的动态src不起作用

【英文标题】：Vue cli 3 project ,dynamic src in image path not working

【发布时间】：2019-06-26 01:58:05

【问题描述】：

我在 vue 组件中引用图像 url，例如

<img  src="~statics/reports/logo.png">

这行得通

但在尝试时

<img  :src="getURL()">


data() 
    return  imgPath: "~statics/reports/logo.png" ;
  ,

  methods: 

    getURL() 
        // 

      // console.log(path)
      return (this.imgPath)
    
  ,

失败了

我的文件夹结构是

在第一种情况下，路径被解析为

http://localhost:8081/img/logo.82b9c7a5.png

并由开发服务器自动提供服务

第二种情况下路径不解析 它仍然是http://localhost:8081/~statics/reports/logo.png

我正在使用 vue cli 3 为 webpack 生成默认配置。

我不想对所有图像都使用相对路径，例如 ../images/，因为它会使它更加冗长。 我试过 require(pathVariable) 也不起作用 当 url 是动态的，即资产名称来自服务器并且我在方法中附加路径或计算并使用 :src 动态绑定来提供它时，请帮助解析 img 路径

【参考方案1】：

第二种方式失败了，因为“~”试图从 node_modules 中获取这个资产。您可以在此处阅读有关处理资产的更多信息： https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports.

要修复它，只需使用如下要求：

data() 
  return 
    imgPath: require('@/statics/logo.png')
  

..或直接在模板中：

<img  :src="require('@/statics/logo.png')">

【参考方案2】：

对于 Vue 3 项目，您可以使用以下内容：

<img src="./assets/logo.png" />

【讨论】：

它是相对路径。它没有回答问题。

它回答了我的问题。 +1