小程序怎么请求图片，并且渲染图片？

迈不过友情╰ 2023-02-26 12:22 7阅读 0赞

小程序请求后端接口的时候，，会请求到一些图片的链接  
怎么把这个链接渲染到小程序端的界面上?

今天来记录一下。

找的一个免费的api接口，（不知道啥时候失效，但是是在官方地址找到的，uniapp接口文档也一直有人在维护，应该算是比较稳定的，一年半载是不糊挂的。）

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

目标图片链接，将数组里面的author\_avatar取出来，渲染在view里面。

![format_png][]

参考代码：

wxml

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);
    }

结果是这样的，对接口数据里面的数据进行循环遍历，得出图片。  
![format_png 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70][]

[format_png]: /images/20230209/1c515f8419f74ff492fe77e258ca9216.png
[format_png 1]: /images/20230209/8754ff01531847f5bd859e0ea46fa236.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: /images/20230209/b458c77976ae4cdda8b5d39a5fba7d09.png