Vuejs 图像 src 动态加载不起作用 [英] Vuejs image src dynamic load doesn't work

问题描述

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

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

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

解决方案

所以真正的解决方法是:

:src="getImage(obj.img)"获取图像(路径){返回要求(路径)}

您可以在 这篇来自 Vue 创始人 Evan 的回复中阅读更多相关信息

I just started using Vue.js and Vue CLI and i'm facing an issue, i don't understand why i can't set the image dynamically from the scope but i can do it writing it directly in the HTML, obj.img is a string with @/assets/logo.png value too. I have a timeout faking an ajax call, but the browser does not resolve properly the routes for the image.

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

Also, why are the routes different? Any ideas?

解决方案

So the real fix would be this:

:src="getImage(obj.img)"

getImage(path) {
  return require(path)
}

You can read more about it in this response from Evan, the creator of Vue

这篇关于Vuejs 图像 src 动态加载不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！