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

小程序請(qǐng)求后端接口的時(shí)候，，會(huì)請(qǐng)求到一些圖片的鏈接
怎么把這個(gè)鏈接渲染到小程序端的界面上?

今天來記錄一下。

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

目標(biāo)接口：https://unidemo.dcloud.net.cn/api/news

目標(biāo)圖片鏈接，將數(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é)果是這樣的，對(duì)接口數(shù)據(jù)里面的數(shù)據(jù)進(jìn)行循環(huán)遍歷，得出圖片。

?

?

?