Vue 和 API:显示图像 [英] Vue and API: Displaying Image

查看:22
本文介绍了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屋!

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆