WebP图片加载异常：新标签打开显示代码而非图片（Laravel-Medialibrary）

你的问题大概率是Apache服务器未配置WebP对应的MIME类型导致的，具体分析和解决方法如下：

• 添加WebP的MIME类型配置
  Apache默认不会识别.webp文件的MIME类型，当直接访问图片文件时，服务器会以默认的文本类型返回，浏览器就会把二进制图片内容当成文本解析，显示乱码。而img标签能正常显示是因为浏览器会尝试自动识别图片格式。
  解决方法：在服务器的.htaccess文件或者Apache主配置文件（httpd.conf）中添加以下配置：

  AddType image/webp .webp
  

  配置完成后重启Apache服务生效。

• 检查Laravel返回图片的响应头
  如果你的图片是通过Laravel路由间接返回的（而非直接访问存储文件），需要确保返回响应时设置了正确的Content-Type头。可以在返回图片的逻辑中添加：

  return response()->file($imagePath)->header('Content-Type', 'image/webp');
  

本地和cPanel环境正常的原因是：cPanel通常默认预装了WebP的MIME类型支持，而本地开发环境（如XAMPP、Valet）也大多已经配置好对应规则。

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