Vue CLI 3项目，图像路径中的动态src无法正常工作

Question

我引用的图像的URL在像VUE成分

<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

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

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

我使用VUE CLI 3生成的WebPack默认的配置。

我不想对所有图像使用相对路径，例如../images/，因为它使它更加冗长。 我尝试过require（pathVariable）也不起作用 请当URL是动态的，即资产名称解析IMG路径帮助来自服务器和我追加的方法路径或计算和使用：SRC dynamicbinding为它服务

Answer 1

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

要解决此问题，只需使用以下需求：

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

..或直接在模板中：

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

Answer 2

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

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