网站缩略图出现400错误的解决方法,原来对象存储这样用!——Harry

写在前面

本人非计算机专业,也没有学过前端知识,本文所涉及的分析非常业余,也可能不正确,完全是自己组织的语言,如果有任何问题欢迎大家指正!

惨痛经历

刚开始建站不久,由于资源还不是很多,站内所有图片索性就和服务器放在一个根目录下,这个时候是的图片是可以访问的。随着站内资源的逐渐增加,需要加载的图片越来越多,加载时间也越来越慢了。怎么办呢?于是,我就找到了腾讯云COS对象存储服务(新用户6个月免费使用),将站内所有静态文件全部放入COS中,访问速度有了质的提升。接下来就是各种优化:防盗链、HTTPS、回源、CDN等等……效果都还不错,自网站上线以来也没出现什么问题。直到有一天(2020.04.16),突然冒出个……

什么鬼?专题图片怎么挂了??之前还好好地???网站才上线两天啊!心里突然冒出很多问号……于是,开始在网上找解决办法……

百度一搜,果然,发现有个人的情况和我一样,点进去一看……白高兴一场,没有大神提出解决方法。

没办法,只能发挥自个的聪明才智,自己动手解决了。

问题分析

首先,我们打开图片出现问题的那个网页,F12分析一下请求,结果如下:

Request URL: https://www.stblog.com.cn/wp-content/themes/DUX/func/timthumb.php?src=https://www.img.stblog.com.cn/SubjectImg/5GSubject.jpg&w=186&h=120
Request Method: GET
Status Code: 400

将请求的URL单独打开,结果是这样的

获取图像的时候出错

400错误的解释如下:HTTP 400 Bad Request 响应状态码表示由于语法无效,服务器无法理解该请求。 客户端不应该在未经修改的情况下重复此请求。

也就是说,我向COS服务器发送获取图像的请求,服务器那边发现我的图像经过了修改,无法理解,于是响应400请求。

通过分析请求URL,可以发现,这张缩略图经过timthumb.php这个文件处理后,客户端再向服务发送请求,那么问题是不是出现在timthumb.php这个文件里呢?

探索方法

直接百度这个文件

发现有人直接将里面的代码一行一行注释翻译了出来(传送门:oschina

分析里面的代码,发现有这样一条:

if(! defined('BLOCK_EXTERNAL_LEECHERS') ) 	define ('BLOCK_EXTERNAL_LEECHERS', false); // If the image or webshot is being loaded on an external site, display a red "No Hotlinking" gif.

大致就是防盗链,防止别人直接那你的图用。难道我要关掉防盗链吗?不可取。算了,这个文件这么多代码,也懒得看了,再找找别的方法。

百度A TimThumb error has occured之后,发现很多人和我一样,但网上的方法千篇一律,都是赋予777权限,清除cache文件夹什么的,试了一下,完全没有用。

深入分析

F12继续审查元素,复制该处的div标签里的class名称”zhuanti-list-item ht_custom_grid_1_4

利用文件搜索找到源文件”mo_home_topic.php“的第26行,代码如下

<div class="zhuanti-list-item ht_custom_grid_1_4"><a class="thumbnail-link" href="'.get_term_link($item->term_id).'"><div class="thumbnail-wrap"><img src="' . THEME_URL . '/timthumb.php?src='. subject_image_url($item->term_id).'&w=186&h=120" alt="'.$item->name.'" class="thumb"></div></a>

这个时候,我要做的,就是将img src=””双引号的内容进行替换,替换成图片经过自己处理后的路径,而不是由timthumb.php处理。

既然出错的地方加载的图片是经过本地处理后,再向服务器发送请求,那么,我是不是能够将这里的代码替换,将图片在COS中直接处理,然后将处理后的链接放上去……

找到方法

打开腾讯云对象存储的API文档,发现了这样的一个接口

/thumbnail/<Width>x<Height>! 忽略原图宽高比例,指定图片宽度为 Width,高度为 Height ,强行缩放图片,可能导致目标图片变形

这就厉害了,结合之前的请求URL里的图片尺寸,我们可以得到图片地址的后缀为为:?imageMogr2/thumbnail/186×120!

解决问题

编辑mo_home_topic.php源文件,更改

<img src="' . THEME_URI . '/func/timthumb.php?src='. subject_image_url($item->term_id).'&w=186&h=120"

<img src="' . subject_image_url($item->term_id).'?imageMogr2/thumbnail/186x120!"

保存之后,回到主页刷新一下。

问题解决!

举一反三

同样的,别的地方,只要用到了缩略图出现问题,或者其他图片显示问题,都可以类似地用这个方法解决。

新的问题

你以为就这样结束了?上面这个问题解决了,但是,我又遇到了新的问题:如果在其他地方引用了之前出错的.jpg文件,使用了上面这种方法之后,就会出现下面的问题

图片大小怎么没有按照我的套路来???不应该是820×280吗?怎么还是186×120?

新的探索

难道是因为浏览器缓存了之前的文件,导致之后引用的.jpg在浏览器中显示的是缩略后的样子?如果我清空缓存之后,会不会变成我想要的样子呢?试试。果不其然,清空浏览器缓存之后………………无效……

居然无效,那么问题肯定不是出在浏览器缓存上,肯定是代码的锅,至于客户端和服务器发生了什么py关系,我也不懂,索性就换个方式吧。

img标签中,有个widthheight属性,那么是不是可以在src后面加入这两个属性,来指定图片大小,从而达到目标尺寸得显示效果?试试吧。

src="' . subject_image_url($item->term_id).'" height="280"

效果出来了

嗯,这么一看,确实有用!但是图片太模糊了,客户端显示的效果还是引用之前的图片然后再进行缩放的,所以才会出现马赛克画质。

不行不行,还得寻找别的方法……

深入研究

既然此路不通,那我研究一下timthumb.php这个源代码看看。

在文件文件里搜索出错的代码A TimThumb error has occured,结合网上已翻译好的:

重点我已经圈出来了,大致步骤:

  1. 产生了缓存文件
  2. 图片是外部网址
  3. 缓存无效
  4. 空的缓存,请求失败

到网站目录下的cache目录发现确实产生了一个.txt的缓存文件,但是大小为0。

那么这样该怎么解决呢?我也不知道o(╯□╰)o再想想别的办法……

既然本地无法解决,我是不是可以直接在COS服务器上寻找解决办法,毕竟COS上是原图,未经任何修改。

接着打开对象存储之后,发现有一个样式处理,样式处理有个样式分隔符。使用说明上写格式是:

http:// 绑定域名 /文件名称 + 分隔符 + 处理样式名

这样的话……我好想找到解决方法了。我直接在img标签中调用这个格式,让客户端每请求一次,服务器就用原图处理一次,然后返回给客户端。试试看。

再次解决

  • 首先,新建样式:样式分隔符:/;样式名称:Subject;样式处理:(如图)

  • 然后,在源代码中修改img标签的src属性为
src="<?php echo subject_image_url($cat->term_id).'/Subject'; ?>"
  • 试试效果

这一次是完美解决了!✿✿ヽ(°▽°)ノ✿

试了试,其他地方用这个方法是有用的。

写在最后

虽然我不是很懂php,但是,只要动动脑筋,没有什么问题是解决不了的!看不懂没关系,只要肯动手动脑,就可以找到适合自己的方法!方法是想出来的!不管在哪个方面,只要肯动手,肯动脑,没有什么问题不能解决!

古人有云:不闻不若闻之,闻之不若见之,见之不若知之,知之不若行之。——《荀子·儒效》

 收藏 (1) 打赏

您的赞助是我分享的最大动力!

支付宝扫一扫赞助

微信钱包扫描赞助

转载请注明出处:STBLOG » 网站缩略图出现400错误的解决方法,原来对象存储这样用!——Harry

分享到: 更多 (0)

热门文章

  • 评论 抢沙发

    评论前必须登录!

    立即登录   注册

    ❤ 感谢您的关注与支持!❤

    对TA表白给我留言
    我要注册

    登录

    忘记密码 ?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册

    我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活