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有这个地址,后面循环出的则只有图片名。
- 这里进行拼接
- 以上就完成了对图片的循环渲染啦!