小程序不能正常加载缩略图解决办法

技术分享 微信小程序 Typecho代码 2019-05-22 阅读:3045

小程序抓取的是thumb字段显示图片。

20190522085128.png

很多主题能够将文章的第一张图片自动设置为thumb缩略图,不需要手动设置。
所以只要你的网站能够显示缩略图,那多半不是这个问题,继续看下面。

第一种情况配置域名

有部分网站的网站服务器和资源(图片、视频等)服务器不在一个域名,
例如网站域名在hiai.top,而图片存放的地址在blog.hiai.top。
此时应该不仅将blog.hiai.top添加到小程序的服务器域名里面,同时也应该将blog.hiai.top添加到服务器域名,以本站为例:
20190522085514.png

注意,你的图片地址必须也要是https,否则微信会拒绝访问!

第二种情况设置防盗链

如果上面的方法试过了还是不行,那多半是因为你设置了防盗链。有部分网站的资源服务器放在了对象储存或者CDN上面,并开启了防盗链。
这将导致对象储存拒绝微信小程序访问,也可能导致小程序不能加载图片。
解决方案:

  • 1.将servicewechat.com放在防盗链白名单
  • 2.开启允许空refer

第三种暴力设置随机缩略图

这样配置就可以了,缩略图就能显示了,如果缩略图还是不显示,那就暴力设置缩略图,在wetypecho插件中Action.php:
20190522090117.png

$thumb = "https://www.hiai.top/usr/themes/HIAI/img/thumb/" . mt_rand(1, 8) . ".jpg";
$post['thumb'] = $this->db->fetchAll($this->db->select('str_value')->from('table.fields')->where('cid = ?', $post['cid']))?$this->db->fetchAll($this->db->select('str_value')->from('table.fields')->where('cid = ?', $post['cid'])):array(array("str_value"=> $thumb));

第四种错误情况

我们的缩略图默认获取的是thumb字段,这个thumb字段是一个数组,有时候他会获取三个或者两个图片。
如果你的小程序不显示那么在代码: BlogWechat/ hiTypecho / pages / index / index.js 的第150行输入console.loe(res) 这时你的控制器就会打印获取到的数据,然后你需要根据情况来设置缩略图,在代码的:BlogWechat/ hiTypecho / pages / index / index.wxml
如下图显示:
2020-03-21_215306.jpg

版权声明

本文基于《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
文章链接:https://www.hiai.top/archives/99.html (转载时请注明本文出处及文章链接)

如果觉得我的文章对你有用,请随意赞赏

14条评论

    Mr.Yang

    VM2945:1 Failed to load image https://image.weilanwl.com/gif/wave.gif
    the server responded with a status of 404 (HTTP/1.1 404 Not Found)
    From server 2409:8c62:410:a:3::3fe

    加了以后报错

    游客 Windows10 69 天前回复

      拾光
      @Mr.Yang

      加我Q吧

      作者 Windows7 69 天前回复

        Mr.Yang
        @拾光

        好的,加你了

        游客 Windows10 69 天前回复

    Mr.Yang

    以上方法都试过,还是没有解决
    VM1186:1 Failed to load local image resource /pages/index/%E6%B5%8B%E8%AF%95
    the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error)
    报错代码

    游客 Windows10 69 天前回复

      拾光
      @Mr.Yang

      你试下那个暴力设置缩略图的方法。然后用console.log()打印一下看有没有获取到。

      作者 Windows7 69 天前回复

        Mr.Yang
        @拾光

        我刚刚暴力设置一下,还是不管用

        游客 Windows10 69 天前回复

          拾光
          @Mr.Yang

          在BlogWechat/ hiTypecho / pages / index / index.js 第105行加一句console.log(res),你看控制台打印thumb是什么?

          作者 Windows7 69 天前回复

            Mr.Yang
            @拾光

            好,我再试试

            游客 Windows10 69 天前回复

          拾光
          @Mr.Yang

          控制器不能打印吗?

          作者 Windows7 69 天前回复

    十念

    怎么暴力设置省略图呢?我改了那个图片路径连接改了没用

    游客 Windows10 246 天前回复

      sking
      @十念

      要从代码里面修改的呢

      作者 Windows7 245 天前回复

        十念
        @sking

        求教一下,谢谢

        游客 Windows10 244 天前回复

          sking
          @十念

          加我Q:178566946

          作者 Windows7 243 天前回复

    xixi

    好的

    游客 372 天前回复