Filepond遇WebP图片问题：页面重载后files属性加载的图片无法显示

问题现象 #

• JPEG/PNG文件在Filepond中可正常预览、删除、替换，更新后能正确存储并显示
• WebP文件更新流程无报错，但页面重载后通过files属性加载无法显示
• 拖拽WebP文件到Filepond时，始终显示文件大小为1KB

排查与解决步骤 #

1. 确认Filepond对WebP的支持配置

   • 确保Filepond及filepond-plugin-image-preview插件为最新版本，旧版本可能未默认支持WebP的MIME类型识别
   • 手动指定acceptedFileTypes包含WebP类型，示例代码：

     FilePond.create(document.querySelector('input[type="file"]'), {
       acceptedFileTypes: ['image/jpeg', 'image/png', 'image/webp']
     });
     

2. 检查服务器端WebP文件的处理逻辑

   • 验证服务器返回WebP文件时，HTTP响应头的Content-Type是否为image/webp，若返回application/octet-stream等非图片类型，浏览器无法识别预览
   • 排查后端接收WebP文件的代码，确认文件是否完整存储（拖拽显示1KB大概率是上传时文件未被正确写入，仅生成了空文件或截断文件）

3. 修正页面重载后的WebP初始化加载逻辑

   • 通过files属性加载WebP文件时，需明确指定文件的type为image/webp，避免Filepond无法识别文件类型，示例代码：

     FilePond.setOptions({
       files: [
         {
           source: '/uploads/your-image.webp',
           options: {
             type: 'local',
             file: {
               name: 'your-image.webp',
               type: 'image/webp'
             }
           }
         }
       ]
     });
     

4. 验证浏览器与文件本身的兼容性

   • 确认使用的浏览器支持WebP（Chrome、Firefox、Edge等现代浏览器均支持，IE不支持）
   • 检查本地WebP文件是否损坏，可通过浏览器直接打开文件路径验证是否能正常显示

内容的提问来源于stack exchange，提问作者fabioferrero