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

Question

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

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

这工作

但在尝试的同时

<img alt="Vue logo" :src="getURL()">


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

  methods: {

    getURL() {
        // 

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

它失败了

我的文件夹结构是

​

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

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

并由dev服务器自动提供服务。

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

我使用vue cli 3生成webpack的默认配置。

我不想对所有的图像使用相对路径，比如./映像/，因为它会使其更冗长。我尝试过要求(PathVariable)也不能工作--当url是动态的时，请帮助解析img路径，例如，资产名称来自服务器，我在方法或计算中附加了一个路径，并使用:src动态绑定来服务它。

Answer 1

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

要修复它，只需使用如下所示的require：

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

直接在模板中的..or：

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

Answer 2

对于Vue 3项目，可以使用以下方法：

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