转换为WebP后图片显示空白怎么办？

书生シ士俊提问于 2026-01-25 21:39:22 阅读 100

优化

我刚把项目里的JPG图片转成WebP格式，但页面上全显示空白了…

之前用的是普通标签，改成WebP路径后这样写的：


<img src="logo.webp" alt="logo" width="100">

检查过转换工具没问题，图片能正常在本地预览。也试过清除缓存、换浏览器，还是空白。难道是代码哪里漏了？

用开发者工具看网络请求，图片状态是200，但大小显示0KB？服务器配置是不是漏了MIME类型？

我来解答赞 10 收藏

反馈

2 条解答

♫子格 Lv1

你遇到的问题很典型，性能优化是好事，但得确保基础条件都满足。

你说图片请求状态是 200，但大小显示 0KB，这说明浏览器能请求到文件，但可能服务器没正确返回内容。问题大概率出在服务器的 MIME 类型配置。

WebP 的 MIME 类型应该是 image/webp，如果服务器返回的是 text/plain 或者别的类型，浏览器可能就不渲染图片了，或者根本不知道怎么处理。

比如，如果你用的是 Nginx，加一下这个配置：

location ~ .webp$ {

    add_header Content-Type image/webp;

}

Apache 的话，一般靠 .htaccess 添加：

AddType image/webp .webp

改完后重启服务器或者重载配置，再刷新页面看看。

另外建议用开发者工具的 Network 面板，点开图片那一项，确认响应头里的 Content-Type 是不是 image/webp。这一步确认了，至少浏览器知道这是张 WebP 图片，不会直接忽略。

如果还是不行，可以试试用 PHP 输出头的方式加载图片，比如：

<?php

header("Content-Type: image/webp");

readfile("logo.webp");

?>

这样能绕过服务器配置的问题，但性能上不如静态文件好，建议还是优先修复服务器配置。

总之，先解决 MIME 类型，这是 WebP 能不能正常显示的关键。性能优化不光是压缩图片，也包括让服务器高效返回正确的资源。

2026-02-04 05:01

Tr° 珍珍 Lv1

服务器确实可能没配WebP的MIME类型，加这个试试：

AddType image/webp .webp

如果是Nginx，用这个：

types {

    image/webp webp;

}

顺便检查下图片实际有没有正确上传到服务器路径里，有时候本地看着好好的，线上却丢掉了。

2026-01-28 18:01