使用Hexo Webp Cloud Proxy插件渲染博客后图片变为Undefined

前言

继先前使用 Cloudflare R2 存储桶搭建图床之后，为了再一次提高图片的访问速度，我采用了WebP Cloud Services来讲图片转为适合浏览器的现代化文件格式Webp。找了下，有一个Hexo博客插件hexo-webp-cloud-proxy可以方便的做到这一点。它可以很好的将所有的Post内图片链接转换成带有WebP Cloud的链接。

安装

npm install hexo-webp-cloud-proxy --save

问题

博客内含有GIF图，这玩意难以压缩，体积又大，很容易就把WebP Cloud的200M缓存吃光，因此我不打算处理它们。在Hexo根目录的_config.yml_插件设置内配置：

webp_cloud_proxy:
  enable: true
  # the suffix of img type to use webp cloud service
  convert_type_list: ["jpg", "jpeg", "png"]
  # your site url
  pre_url: https://pic.esing.dev
  # webp cloud service proxy url
  proxy_url: https://webp.esing.dev
  # the filter priority, see https://hexo.io/api/filter.html
  priority: 10

结果渲染之后，所有的GIF图片都变成了undefined。这是咋回事？

排查

进npm看源代码。只有一个很小的JS：

let enable = hexo.config.webp_cloud_proxy.enable || false;
let convertList = hexo.config.webp_cloud_proxy.convert_type_list;
let pre_url = hexo.config.webp_cloud_proxy.pre_url;
let proxy_url = hexo.config.webp_cloud_proxy.proxy_url;
let priority = hexo.config.webp_cloud_proxy.priority || 10;


hexo.extend.filter.register('after_post_render', (data) => {
    if (!convertList || convertList.lenth == 0) {
        convertList = ["jpg", "jpeg", "png", "gif"];
    }
    if (!enable) {
        return;
    }
    
    data.content = data.content.replace(/<img(.*?)src="(.*?)"(.*?)>/gi, (str, p1, p2) => {
        let value = false;
        value = convertList.some(element => {
            return p2.endsWith(element);
        });
        if (!value) {
            return;
        }
        if (p2.startsWith("/")) {
            let img_url = proxy_url + p2;
            return str.replace(p2, img_url)
        }
        if (p2.startsWith(pre_url)) {
            let img_url = p2.replace(pre_url, proxy_url);
            return str.replace(p2, img_url)
        }
    });

}, priority);