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

【问题标题】：Vuejs image src dynamic load doesn't workVuejs图像src动态加载不起作用
【发布时间】：2019-03-15 22:07:33
【问题描述】：

我刚开始使用 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>

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

【问题讨论】：

在你的数据对象属性中试试这个./assets/logo.png
因为加壳程序没有在计算属性的底层使用require。检查右边第一个相关问题下的第一个答案---->
` `这个也解决了问题

标签： vue.js vue-cli-3

【解决方案1】：

所以真正的解决办法是这样的：

:src="getImage(obj.img)"

getImage(path) {
  return require(path)
}

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

【讨论】：

显然不可能只将一个变量传递给require，因此其中一种解决方案可能是巨大的开关盒：github.com/facebook/react-native/issues/… 而且return require(path + '') 似乎正在工作。
` `这个也解决了问题