Vue如何把服务器返回的图片数据渲染出来

  • 首先,一般来说,当请求图片的接口时,会返回一个数组,这个数组里会是一些图片的名字,比如1.jpg,2.jpg。
  • 我的做法是先在data里定义一个数组,来存储服务器返回的图片名
urlName: [
'这里面放服务器返回的图片名数据'
],
  • 图片地址的构成是http地址+图片名,比如
https://i0.hdslb.com/bfs/activity-plat/static/20190404/f21c9a9573c71006d7898b5740803822/r1C1JNXFN.png@125w_160h.webp
  • 由于是一个图库的功能,所以用了for循环。这里要注意的是拼接src的地址,如果不用变量存起来,就只有原本的第一个li有这个地址,后面循环出的则只有图片名。
<ul class="photoList">
<li v-for="(item,index) in urlName" :key="index">
<!-- imgurl里放的是前面的http地址,在data里定义 -->
<img :src="imgUrl+item" alt> 这里进行拼接
</li>
</ul>
  • 以上就完成了对图片的循环渲染啦!

Vue如何循环渲染图片的更多相关文章

  1. vue3——vue数据循环渲染

    博客地址 :https://www.cnblogs.com/sandraryan/ vue循环渲染 <!DOCTYPE html> <html lang="en" ...

  2. vue如何循环渲染element-ui中table内容

    对于大多数前端开发者来说,vuejs+element-ui是开发后台管理系统过程中必不可少的技术框架.而后台管理系统中,最常见的形式就是表格和表单,以便用来增删改查. element-ui中table ...

  3. vue input 循环渲染问题

    <li> <span>下属区县:</span> <div class="quxianList" v-for="(qx,index ...

  4. vue.js循环for(列表渲染)详解

    vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...

  5. Vue学习笔记(三)条件渲染和循环渲染

    目录 一.条件渲染 1. v-if 2. 与v-else配合使用 3. 与v-else-if配合使用 4. v-show的使用 5. 类型切换案例 二.列表渲染 1. 遍历数组 2. 遍历对象 获取v ...

  6. vue + element 动态渲染、移除表单并添加验证

    博客地址:https://ainyi.com/66 又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内 ...

  7. vue2.* 目录结构分析 数据绑定 循环渲染数据 数据渲染02

    一.目录 结构分析 node_modules:项目依赖文件(也可以说是模块) src:开发时所用的资源 assets:静态资源文件 App.vue:根组件(最基础的公共页面) main.js:实例化v ...

  8. vue+element-ui中的图片获取与上传

    vue+element-ui中的图片获取与上传 工作上接触了一下图片的处理,图片的格式是文件流, 记录如下. 请求图片 请求图片的时候,带上{ responseType: 'blob' }, 否则图片 ...

  9. 【03】Vue 之列表渲染及条件渲染

    3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...

随机推荐

  1. sublime text 3中browsersync的使用

    1.在项目所在位置右键选择Git Bash Here 2.输入 // --files 路径是相对于运行该命令的项目(目录) browser-sync start --server --files &q ...

  2. Java快速入门-03-小知识汇总篇(全)

    Java快速入门-03-小知识汇总篇(全) 前两篇介绍了JAVA入门的一系小知识,本篇介绍一些比较偏的,说不定什么时候会用到,有用记得 Mark 一下 快键键 常用快捷键(熟记) 快捷键 快捷键作用 ...

  3. 古老的CSS同高列问题

    今日在网页设计时,遇到了希望页面的几列同高需求的实现问题,搜罗了一下google,找到以下文章,感觉不错,翻译过来,同时作为学习加深印象. https://css-tricks.com/fluid-w ...

  4. C#写入文本文档

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  5. SQL点点滴滴_公用表表达式(CTE)递归的生成帮助数据

    本文的作者辛苦了,版权问题特声明本文出处:http://www.cnblogs.com/wy123/p/5960825.html 工作有时候会需要一些帮助数据,必须需要连续的数字,连续间隔的时间点,连 ...

  6. DW数据库整理设置

    操作管理数据库的数据整理设置如下: 管理-全局数据库设置-数据库整理(database grooming)中,选择一个数据类型进行编辑就可以了.默认是保留7天的数据.具体可以参考如下: http:// ...

  7. Mysql进阶-day3

    多实例介绍: mysql多实例就是一台服务器开启多个不同的服务端口(3306,3307),运行多个MySQL服务进程,这些服务进程通过不同的socket监听不同的服务端口来提供各自的服务端口. 这些m ...

  8. ZT Android Debuggerd的分析及使用方法

    Android Debuggerd的分析及使用方法 分类: 移动开发 android framework 2012-12-28 12:00 983人阅读 评论(0) 收藏 举报 目录(?)[+] An ...

  9. grep 满足多个关键字 任意关键字 排除多个关键字

    ① grep -E "word1|word2|word3"   file.txt    满足任意条件(word1.word2和word3之一)将匹配. ② grep word1 f ...

  10. Chapter 2 Secondary Sorting:Detailed Example

    2.1 Introduction MapReduce framework sorts input to reducers by key, but values of reducers are arbi ...