关于微信wx.previewImage图片没有正常显示的问题

最新推荐文章于 2025-09-14 15:51:50 发布

原创最新推荐文章于 2025-09-14 15:51:50 发布 · 2.2w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #图片预览

本文介绍了解决微信开发中预览图片时遇到的黑屏问题的方法。主要涉及两个方面：一是确保传递给wx.previewImage()函数的urls参数格式正确；二是检查并修正urls数组的数据格式。

在微信开发的的时候有时需要预览图片，我们会用微信中的:

    wx.previewImage({
        current: url, // 当前显示图片的http链接
        urls: [] // 需要预览的图片http链接列表
    });

但是如果写完代码发现在手机上出现了黑屏的问题，有可能是以下几种情况：
1、urls后以的[]没有去掉，这个属于语法错误了，去掉就可以了

$(".img_prev").click(function(){
    var url =$(this).attr("src");
    var arr = Array();
    var urls =$("#img_prev").children("img").each(function(index){
        var temp = $(this).attr("src");
        arr.push(temp);
    });

    wx.previewImage({
        current: url, 
        urls: [arr] //这里就将[]去掉
    });
});

2、urls后的数组格式不正确，造成浏览器没有办法识别，这种情况经经常出现的就是在后台取出数据之后没有转换为js可以识别的数组而造成的；

正确格式：

$(".img_prev").click(function(){
    var url =$(this).attr("src");
    var arr = Array();
    var urls =$("#img_prev").children("img").each(function(index){
        var temp = $(this).attr("src");
        arr.push(temp);
    });

    wx.previewImage({
        current: url, // 当前显示图片的http链接
        urls: arr // 需要预览的图片http链接列表
    });
});

//如在必要可以将数组打印出来对比一下就可知道了