MODX网站WebP图片MIME类型缺失问题求助

• 检查MODX核心MIME类型配置
  登录MODX管理器，进入系统设置，搜索allowed_file_types，确认列表里包含webp；再搜索mime_types，确保已添加webp:image/webp条目。如果没有，直接在对应输入框里补充即可。

• 用MODX插件自动修正页面图片输出
  既然没法直接编辑HTML，可创建一个插件自动处理页面输出的WebP图片：

  1. 在MODX管理器里新建插件，命名比如FixWebPImages
  2. 粘贴以下代码：

  <?php
  $output = &$modx->resource->_output;
  // 给缺失alt的WebP图片补默认alt，同时添加type属性指定MIME类型
  $output = preg_replace('/<img([^>]+)src="([^"]+\.webp)"([^>]*)>/i', '<img$1src="$2" alt="" type="image/webp"$3>', $output);
  // 要是想让alt更有意义，可以改成从文件名提取，比如把文件名里的下划线换成空格
  // $output = preg_replace_callback('/<img([^>]+)src="([^"]+\/)([^"]+\.webp)"([^>]*)>/i', function($matches) {
  //     $alt = ucwords(str_replace(['-', '_'], ' ', pathinfo($matches[3], PATHINFO_FILENAME)));
  //     return "<img{$matches[1]}src=\"{$matches[2]}{$matches[3]}\" alt=\"{$alt}\" type=\"image/webp\"{$matches[4]}>";
  // }, $output);
  ?>
  

  3. 启用插件，设置触发事件为OnWebPagePrerender

• 确认服务器端的WebP MIME配置
  如果是Apache服务器，在网站根目录的.htaccess文件里添加：

  AddType image/webp .webp
  

  如果是Nginx，在站点配置里的types块中添加：

  image/webp webp;
  

  共享主机没法改服务器配置的话，优先用MODX插件解决。

• 清理缓存并重传图片
  先删除当前的WebP图片，在MODX管理器里清理全缓存（页面、资源、元素缓存都清），然后重新上传图片，确保MODX能正确识别图片的MIME类型。

内容的提问来源于stack exchange，提问作者Manfred Knöbel