拾光分享网 | 一个有趣的IT资源分享网

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

小程序抓取的是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

欢迎您的转载:拾光分享网 | 一个有趣的IT资源分享网 » 小程序不能正常加载缩略图解决办法


评论 14

  • 昵称*
  • 邮箱 (必填)
  • 网址
  1. # 1
    xixi的头像

    好的

    xixi (2019-05-24) 回复
  2. # 1
    十念的头像

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

    十念 (2019-09-26) 回复
    • # 2
      sking的头像

      要从代码里面修改的呢

      sking 回复 @十念 (2019-09-27) 回复
    • # 3
      十念的头像

      求教一下,谢谢

      十念 回复 @sking (2019-09-28) 回复
    • # 4
      sking的头像

      加我Q:178566946

      sking 回复 @十念 (2019-09-29) 回复
  3. # 1
    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)
    报错代码

    Mr.Yang (2020-03-21) 回复
    • # 2
      拾光的头像

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

      拾光 回复 @Mr.Yang (2020-03-21) 回复
    • # 3
      Mr.Yang的头像

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

      Mr.Yang 回复 @拾光 (2020-03-21) 回复
    • # 4
      拾光的头像

      控制器不能打印吗?

      拾光 回复 @Mr.Yang (2020-03-21) 回复
    • # 4
      拾光的头像

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

      拾光 回复 @Mr.Yang (2020-03-21) 回复
    • # 5
      Mr.Yang的头像

      好,我再试试

      Mr.Yang 回复 @拾光 (2020-03-21)
  4. # 1
    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

    加了以后报错

    Mr.Yang (2020-03-21) 回复