首页 > 解决方案 > Vuejs图像src动态加载不起作用

问题描述

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

另外,为什么路线不一样?有任何想法吗?

标签: vue.jsvue-cli-3

解决方案


所以真正的解决办法是:

:src="getImage(obj.img)"

getImage(path) {
  return require(path)
}

您可以在 Vue 的创建者 Evan 的回复中了解更多信息


推荐阅读