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

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

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

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

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

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" />