一、前言

因为有大量的图片需要访问,直接访问图片在图片很大的时候加载很慢,所以想到通过nginx的 ngx-http-image-filter 组件去实现动态的访问。但是对于rpm安装或者yum 安装的 nginx 来说,并没有加载ngx-http-image-filter 组件,网上找到的资料大部分都是下载相同的nginx 二进制包,自己编译然后替换目录显得非常麻烦。

二、yum安装ngx-http-image-filter组件

进过一段时间搜索,发现可以通过yum 直接安装 ngx-http-image-filter 组件,在此记录一下,以防止忘记。

yum install -y nginx-module-image-filter

通过此方法安装后,需要更新nginx.conf 配置,加载ngx-http-image-filter的modules

load_module modules/ngx_http_image_filter_module.so;

将此行加在 nginx.conf 配置文件的最上方,然后执行命令

nginx -s reload 或者 systemctl restart nginx

对于 ubuntu 22.04 通过 apt 安装的nginx ,一开始我也未发现是否就存在 ngx-http-image-filter 这个组件,所以执行了下面命令之后,也能够使用,并且不需要在nginx.conf 中手动的去加载组件

apt install -y libnginx-mod-http-image-filter

三、简单使用

因为我的目的只是想在页面上更快的加载访问图片,并且没有缓存缩略图的需求,因为一张图片不会加载很多次,所以就使用了最简单的配置

location /weibo/image {
        alias   /weibo/image;
        image_filter resize             $arg_w $arg_h;
        image_filter_buffer             100M;
        image_filter_jpeg_quality       65;
}

alias : 图片所在目录。
image_filter resize: 图片缩略图尺寸,这里是安装尺寸缩小图片,如果需要切割图片,请使用 crop 替换 resize。
image_filter_buffer: 读取的图片大小,默认 1M;默认值时,如果读取的图片大于1M会报 415 错误。
image_filter_jpeg_quality:图片缩略图质量,默认是75;根据自己喜好来设置,个人觉得默认值就可以了。

四、示例

  1. 设置宽度,高度默认
    设置宽度,高度默认
  2. 设置高度和宽度
    设置高度和宽度
  3. 访问原图只要把 w 和 h 设置为默认即可
    访问原图