Vuejs 图像 src 动态加载不起作用

Question

我刚开始使用 Vue.js 和 Vue CLI，我遇到了一个问题，我不明白为什么我不能从范围内动态设置图像，但我可以直接编写它在 HTML 中，obj.img 也是一个具有 @/assets/logo.png 值的字符串。我伪造 ajax 调用超时，但浏览器无法正确解析图像的路由。

<div slot="media">
        <img :src="obj.img"> <!-- http://localhost:8080/@/assets/logo.png -->
        <img src="@/assets/logo.png"> <!-- http://localhost:8080/img/logo.82b9c7a5.png -->
</div>

另外，为什么路线不一样？有什么想法吗？

Answer 1

所以真正的解决方法是：

:src="getImage(obj.img)"

getImage(path) {
  return require(path)
}

您可以阅读更多相关信息in this response from Evan, the creator of Vue

Answer 2

好！

就像@Ohgodwhy 展示的那样，Vue 不直接获取图像路径。

这就是设置图片 src 的方法：

<v-img max-height="150" max-width="250" :src="getImage()"></v-img>

然后，在方法中，您需要：

methods: {
    getImage() {
      return require("./logo.png");
    },
  },

大功告成！我是初学者，我有很多事情要做。

Vuejs 图像 src 动态加载不起作用

Vuejs image src dynamic load doesn't work

vue.js

vue-cli-3