Vue如何循环渲染图片

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>

• 以上就完成了对图片的循环渲染啦！