微信小程序点击图片预览真机无法显示的问题

最新推荐文章于 2023-06-01 14:22:46 发布

皮皮灬虾

最新推荐文章于 2023-06-01 14:22:46 发布

阅读量1.8k

点赞数 2

分类专栏：小程序模块学习日记 web前端文章标签：小程序

本文链接：https://blog.csdn.net/weixin_41791345/article/details/119949166

版权

学习日记同时被 3 个专栏收录

28 篇文章

订阅专栏

web前端

24 篇文章

订阅专栏

小程序模块

14 篇文章

订阅专栏

在使用开发者工具开发微信小程序时遇到一个问题，当点击图片预览时，图片显示为黑屏并持续加载。问题出现在图片预览功能上，代码中使用了wx.previewImage接口来预览http链接的图片。尽管代码看起来没有明显错误，但预览仍然失败。可能的原因包括网络问题、图片格式不支持或者接口使用不当。解决方案可能涉及检查图片链接的有效性、更新微信小程序SDK或调整预览图片的参数设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题： 用开发者工具开发编辑时，点击图片预览，一直显示黑屏加载转圈中…

如图所示：
在这里插入图片描述

实际效果图：
在这里插入图片描述

话不多说，直接上代码

1、html代码：

<view class="img-box">
    <view class="imgs" wx:for="{{imgList}}" wx:key='id'>
        <image src="{{item.imgurl}}" bindtap="clickImg" data-url="{{item.imgurl}}" />
   	</view>
</view>

2、js代码：

data: {
    // 模拟图片数组
    imgList:[
      {
        id:1,
        imgurl:'http://bpic.588ku.com/element_origin_min_pic/16/10/30/528aa13209e86d5d9839890967a6b9c1.jpg'
      },
      {
        id:2,
        imgurl:'http://bpic.588ku.com/element_origin_min_pic/16/10/30/54fcef525fa8f6037d180f3c26f3be65.jpg'
      },
      {
        id:3,
        imgurl:'http://bpic.588ku.com/element_origin_min_pic/16/10/30/62e3ca3a02dddb002eff00482078d194.jpg'
      },
      {
        id:4,
     	imgurl:'http://bpic.588ku.com/element_origin_min_pic/16/10/31/c7167fcfb4ebcd12621c05b0c852e98e.jpg'
      },
      {
        id:5,
        imgurl:'http://bpic.588ku.com/element_origin_min_pic/16/10/30/62e3ca3a02dddb002eff00482078d194.jpg'
      },
      {
        id:6,
 		imgurl:'http://bpic.588ku.com/element_origin_min_pic/16/10/31/c7167fcfb4ebcd12621c05b0c852e98e.jpg'
      },
    ],
}
    
    // 点击查看图片
  clickImg(e){
    console.log(e,'图片路径')
    let url = e.currentTarget.dataset.url;
    console.log([url],'数组')
    wx.previewImage({
      current: url, // 当前显示图片的http链接
      urls: [url] // 需要预览的图片http链接列表
    })
  }