【小程序】预览服务器端的图片

版权声明：----------阿宁i https://blog.csdn.net/ningwb______/article/details/82863844

简述：该文章记录了“xxx项目” 微信小程序开发中，将图片从服务器中拿出来循环渲染到微信小程序页面的功能，类似于论坛的图片显示。技术小白，不好勿喷，多多指教。

注：图片上传到自己服务器如果不能通过域名+路径访问到，可能原因有：图片没有上传到云服务器项目的根目录下。

实现思路:

1. 在页面data中 声明一个数组变量 imgsUrl，

2. app.js的全局变量中 声明变量，用存储图片的通用路径

3. 在需要显示图片的js页面中，发起请求获取需要展示的图片所属id以及图片数量

4. 在函数中声明一个src变量 用于push for循环中的图片路径

5. 使用for循环 将图片数量对应的几个图片放置到src变量中，再将src数组设置为data中的imgsUrl中

6. 在wxml页面中，使用view组件for循环image标签，将数组中的图片路径设置为图片标签的src属性，

------以上即实现了 从服务器端获取图片并预览到小程序中-------

7. 调用函数，实现点击放大预览的效果。

====  实现效果图 ==============================

====  代码部分 ========================

wxml

<view class='showImg' >
    <image wx:for='{{imgsUrl}}' wx:key='k' data-index="{{index}}" src='{{item}}'     bindtap="previewImage" ></image>
</view>
<!-- data-index="{{index}}" 用于点击图片预览 -->

js

data:{
    imgsUrl:[]
},
onload(){
    this.showImgs()
}
showImgs(){
    var src = []
    // 注意：图片路径需要是自己上传到自己服务器的图片，并且可以通过域名.图片路径访问的到，否则无法显示。
    for (var i = 1; i < forTimes; i++){   // 由于博主存储的图片以1开始，所以i为1， forTimes 是需要预览的图片数量+1的结果
    // 拼接完整的图片路径
    var imgUrl = 'https://xxx.xxx.com/xxxx/xx/xxx.jpg' //拼接图片在服务器中的路径
    src.push(imgUrl)
    }
    that.setData({imgsUrl: src})
    console.log("打桩输出 that.data.imgsUrl ---> " + that.data.imgsUrl)
}

/* 点击图片预览大图 - 待补充 */