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

我在 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)
    }
  },

它失败

My folder structure is

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

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

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

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

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

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

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

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

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

..或直接在模板中：

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