小程序圖片渲染
2021-07-28 14:33:10

小程序請求后端接口的時候，，會請求到一些圖片的鏈接
怎么把這個鏈接渲染到小程序端的界面上?

今天來記錄一下。

找的一個免費的api接口，（不知道啥時候失效，但是是在官方地址找到的，uniapp接口文檔也一直有人在維護，應(yīng)該算是比較穩(wěn)定的，一年半載是不糊掛的。）

目標接口：https://unidemo.dcloud.net.cn/api/news

目標圖片鏈接，將數(shù)組里面的author_avatar取出來，渲染在view里面。

?

?

參考代碼：

wxml

<view wx:for="{{list}}" wx:key="index">
  <view class="item">
   <image class="img" src="{{item.author_avatar}}" mode="scaleToFill"></image>
  </view>
</view>

js

Page({
  data: {
    list: []
  },
  onLoad: function (options) {
    wx.request({
      url: 'https://unidemo.dcloud.net.cn/api/news',
      header: {
        'content-type': 'application/json'
      },
      success: res => {
        console.log(res.data)
        this.setData({   
          list: res.data
        })
      }
    })
  },
})

wxss

.item .img{
  width: 100%;
  height: 386rpx;
  position: relative;
  display: flex;
  margin: 10rpx 10rpx;
  border-bottom: 1px solid rgb(197, 199, 199);
}

結(jié)果是這樣的，對接口數(shù)據(jù)里面的數(shù)據(jù)進行循環(huán)遍歷，得出圖片。

?

?

?