在vue.js中显示图像
在vue.js中显示图像
提问于 2018-03-03 21:41:41
我正在尝试开发一个SPA。在这方面，我在前端使用vue.js 2，在后端使用Laravel5.5API。现在我想在前端显示图像。我用HTML写了下面的代码
<img :src="/images/addressObj.image"/>我应该将图像放在Laravel中的什么位置，以及如何在vue.js中访问该图像？
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-03-04 01:24:03
这里的问题是你没有正确使用:src属性，:src检查一个字符串作为值，不要让双引号把你弄糊涂了，在双引号之间你必须放置你的格式化字符串，注意如果使用:src="www.google.com/size"，img将尝试查找url www.google.com/size而不是www.google.com/350x150，或者如果你尝试www.google.com/{{size}}，img将尝试查找www.google.com/%7B%/Bsize%7D%7D (大小是来自下面示例的一个变量)
new Vue({
el: '#app',
data() {
return {
size: '350x150',
size2: '350x400'
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
<button @click="size = '350x150'">Size 350x150</button>
<button @click="size = '350x200'">Size 350x200</button>
<!-- notice the single quotes -->
<img :src="'http://via.placeholder.com/' + size" />
<hr />
<button @click="size2 = '350x400'">Size2 350x400</button>
<button @click="size2 = '350x300'">Size2 350x300</button>
<!-- here with string interpolation -->
<img :src="`http://via.placeholder.com/${size2}`" />
</div>
Stack Overflow用户
发布于 2018-03-03 22:19:30
假设这是一个.vue或.js文件，
<img :src="`/images/${addressObj.image}`"/>我假设您已经正确地为变量addressObj做了必要的准备。
Stack Overflow用户
发布于 2018-03-03 22:53:44
嗯，因为你有动态的源码绑定，所以你必须要求每个图像。
所以你应该这样做：
<img :src='require(`./images/${addressObj.image}`)'>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49084769
复制相关文章
相似问题
腾讯云开发者
