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>

• 以上就完成了對圖片的循環渲染啦！