微信小程序无法加载七牛图片,显示空白的解决方法

最近微信小程序蛮火的,闲鱼看到很多朋友都给WordPress博客添加了微信小程序,真不错。闲鱼的朋友一直吐槽逛闲鱼博客很麻烦,记不住地址(这么简单都记不住,心痛),希望闲鱼博客也弄个微信小程序,好吧,闲鱼也只能入坑小程序了,但是一步步折腾还是遇到了问题,比如架设好小程序后,无论是缩略图还是文章都不显示图片,于是闲鱼只能自己折腾解决了。

微信小程序无法加载七牛图片,显示空白的解决方法
        如下图显示,微信小程序不显示缩略图,很多都是一片空白,提示404错误,但是奇葩的是点击空白地方和图片地址又能显示出图片。
微信小程序无法加载七牛图片,显示空白的解决方法

微信小程序无法加载七牛图片,显示空白的解决方法
        因为微信小程序不显示的都是图片,闲鱼第一时间想到的是服务器的Referer防盗链导致的,所以我们需要去检查服务器的防盗链设置和添加相关白名单
 
一、七牛Referer防盗链白名单设置
        这些图片闲鱼是使用七牛来加速的,所以七牛Referer防盗链那里就需要添加相关白名单。
        将以下两个地址添加在七牛的白名单内,再等待七牛生效就好。

  1. *.servicewechat.com   
  2. servicewechat.com  

微信小程序无法加载七牛图片,显示空白的解决方法
 
二、宝塔防盗链白名单设置
        闲鱼还有用到辣鸡宝塔,在宝塔里也设置了防盗链(闲鱼搞半天就忘记这里了),那么这里也是需要添加相关白名单。将上面那两个地址在宝塔这边也添加就好,如下图。
微信小程序无法加载七牛图片,显示空白的解决方法
三、小程序设置服务器域名(补充)
        像闲鱼这样使用二级域名的还需要在小程序后台配置合法的二级域名(已获得备案),否则也是无法完成小程序内推送的。 操作步骤:微信小程序后台-设置-开发设置-服务器域名
微信小程序无法加载七牛图片,显示空白的解决方法
 
        完成上面的操作,再回来看看小程序,发现就已经能显示图片了,心情瞬间美好起来。程序用的【守望轩】博客开源的“WordPress 微信小程序”,搭建起来还是蛮简单的,感谢。
微信小程序无法加载七牛图片,显示空白的解决方法
        当然,如果你还使用过其他什么CDN也是记得要添加白名单哦,不要像闲鱼这样瞎折腾一会。小程序闲鱼是简单的搞了一下,就不知道能不能审核通过,求人品,求人品,哈哈。

  • 博客公众号
  • 关注本博客公众号
  • weinxin
  • 博客小程序
  • 关注本博客小程序
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:19   其中:访客  10   博主  9

    • Action

      小程序首页缩略图能显示,文章内图片不能显示是什么原因呢?

      • 集优小站

        博主666哦,我想请教下,个人也能弄小程序吗?
        我以前给公司做的小程序都是企业性质的,个人没折腾过。

          • 闲鱼 【博主】

            @集优小站 个人也能申请,就是内容也一些限制,具体看官方的文档。闲鱼博客的小程序都已经通过了

          • 学习笔记Blog

            我咋感觉微信小程序要想出效果,还是得靠微信公众号的支撑呢!

              • 闲鱼 【博主】

                @学习笔记Blog 感觉是,像我们这种博客类的小程序相对于网站就是方便了一点,但是也不太吃香,公众号反而比较能抓住访客。而且个人小程序限制太多了

              • 区块链

                :mrgreen: 我给我自己网站弄个小程序?嘿嘿嘿嘿

                  • 闲鱼 【博主】

                    @区块链 可以啊,内容能通过就好

                  • boke112导航

                    开启防盗链黑名单不是更好,不过开黑名单的话要经常关注也挺烦的

                      • 闲鱼 【博主】

                        @boke112导航 静态资源感觉还是白名单好点,黑名单有点被动,不太喜欢

                      • 杨景文

                        偷了你的赞助模块,希望不要拿刀劈我 :mrgreen:

                          • 闲鱼 【博主】

                            @杨景文 不会,到时候钱分一半就好 :smile:

                          • 蒲公英

                            我记得大佬的源代码也是压缩过的,我是源代码压缩的然后本地调试小程序提示无法访问网络,不知道你遇到这个情况没 :arrow:

                              • 闲鱼 【博主】

                                @蒲公英 html压缩是会有这个问题,所以为了小程序就取消了这个压缩,影响不大能接受。

                              • 明月登楼

                                这个小程序即将要出Pro版了!

                                  • 闲鱼 【博主】

                                    @明月登楼 那就值得期待了,前提是我通过了审核 :lol:

                                  • 青山

                                    羡慕成年人,有微信公众号,可以开发小程序 :cool: :cool:

                                      • 闲鱼 【博主】

                                        @青山 好好读书,然而小程序不给通过 :sad:

                                          • 杨景文

                                            @闲鱼 审核这么严格?未通过审核,那其他人能用吗?

                                              • 闲鱼 【博主】

                                                @杨景文 不能,有些内容不合格吧,又在申请中 :mrgreen: