Vue 和 API:显示图像 [英] Vue and API: Displaying Image
本文介绍了Vue 和 API:显示图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我目前使用 Vue JS,数据来自 API.要从 API 调用数据,我使用此方法 {{services.service_picture}}.
但问题是我无法使用下面的这种方法显示图像.您能否发送一些有关如何使用 Vue JS 显示它的想法
<div class="col-sm-5"><p v-for="services.service_picture 中的图片"></p><img :src="path + '/images/services/'+ picture" class="img-circle" alt="Services"/>
var main = new Vue({el: "#main",数据: {服务: [],路径:'https://examplemyapisource.com'},});
API 来自 https://examplemyapisource.com[{ "service_picture": "18_1516090191.jpg", } ]
解决方案
你在这里试试:
<div class="col-sm-5"><p v-for="服务中的图片"></p><img :src="path + '/images/services/'+picture.service_picture" class="img-circle" alt="Services"/>
I am currently using Vue JS and the data is coming from API . to call a data from API I use this method {{services.service_picture}}.
But the problem is I am unable to display the image with this method below. Can you please send some ideas on how to display it using Vue JS
<div id="main" v-cloak>
<div class="col-sm-5">
<p v-for="picture in services.service_picture"></p>
<img :src="path + '/images/services/'+ picture" class="img-circle" alt="Services" /> </div>
</div>
var main = new Vue({
el: "#main",
data: {
services: [],
path: 'https://examplemyapisource.com'
},
});
API from https://examplemyapisource.com
[
{ "service_picture": "18_1516090191.jpg", } ]
解决方案
You try here:
<div id="main" v-cloak>
<div class="col-sm-5">
<p v-for="picture in services"></p>
<img :src="path + '/images/services/'+ picture.service_picture" class="img-circle" alt="Services" /> </div>
</div>
这篇关于Vue 和 API:显示图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文