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 是动态时，请帮助解析 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" />

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

Vue cli 3 project ,dynamic src in image path not working

assets

webpack

vue.js

webpack-dev-server

vue-cli-3