微信小程序雲開發-雲存儲-獲取帶圖片的商品列表

一、將商品圖片上傳至雲存儲

如下圖，已准備5張商品圖片，並且已經將商品圖片上傳至雲存儲

 

 二、數據庫表添加圖片字段

在數據庫表goods添加字段image，該字段用來存儲圖片的url信息

 

 image在數據庫中的值，從雲存儲中復制對應圖片的url地址。

 

 三、頁面獲取商品信息（商品圖片、商品名稱和商品價格）

1、wxml文件

<view wx:for="{{list}}" class="list">
<image src="{{item.image}}" class="image"></image>
<text>商品名稱：{{item.name}}</text>
<text>商品價格：{{item.price}}</text>
</view>

 2、wxss文件

.image{
  width: 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
}
.list{
  border-bottom: 1rpx solid gainsboro;
  padding: 10rpx 20rpx;
}

 3、js文件

Page({
  onLoad(){
    wx.cloud.database().collection("goods")
    .get()
    .then(res=>{
      console.log("請求成功",res);
      this.setData({
        list:res.data
      })
    })
    .catch(err=>{
      console.log("請求失敗",err);
    })
  }
})

4、效果圖