接口只返回一张图片 Preview里面显示一张图片 Response为空在Vue中该如何显示到页面当中

40 阅读 0 评论 27 点赞

我是靠谱客的博主明亮月饼，最近开发中收集的这篇文章主要介绍接口只返回一张图片 Preview里面显示一张图片 Response为空在Vue中该如何显示到页面当中，觉得挺不错的，现在分享给大家，希望可以做个参考。

当请求的接口只有在Preview里面显示一张图片时，想要去将图片显示在页面当中，就可以直接把接口放在img属性的src中，直接调用即可

这里图片的src属性绑定一个变量，这里绑定是为了点击实现切换验证图片

<div class="imgCode" @click="refreshCode">
  <img :src="imgCode" alt="" />
</div>

变量的初始值赋值为接口

imgCode: "http://****?", //验证码图片

这个时候就已经可以显示在页面上了

点击切换图片就相当于点击再调用一次接口

async refreshCode() {
  this.imgCode = "http://*****?" + Math.random(); // 问号后面拼接东西不影响原接口
},

这样就可以实现点击切换啦

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

接口只返回一张图片 Preview里面显示一张图片 Response为空 在Vue中该如何显示到页面当中