AI网站图片加载失败怎么处理：默认图、懒加载和OSS地址检查

导语：文章封面或正文图加载失败时，页面经常会出现空白、布局跳动或一大片破图图标。对内容站来说，图片不仅影响视觉，也会影响首页卡片、分享封面和用户对文章质量的判断，所以需要把默认图和故障排查一起做好。

AI网站图片加载失败通过默认图懒加载OSS地址和资源状态检查处理的流程图 — 图片加载失败要先保证页面不塌，再排查OSS地址、权限、格式和懒加载逻辑。

先给图片设置可靠默认图

封面图和正文图都应该有默认占位图。默认图不需要冒充真实内容，可以使用简洁的品牌色块或主题图形，并保持和正常图片相同的宽高比，避免加载失败时页面高度突然变化。

默认图只负责兜底，不能替代对原图地址和上传流程的检查。

用onerror处理单张图片失败

前端可以在图片加载失败时替换src，但要防止默认图本身也触发错误造成循环。可以添加一个data-fallback标记，确保同一张图片只处理一次。

image.addEventListener('error', function () {
    if (image.dataset.fallback) return;
    image.dataset.fallback = '1';
    image.src = '/static/theme/nbvil/images/image-placeholder.svg';
});

检查OSS地址是否真的返回图片

上传接口返回成功不代表浏览器一定能显示。需要检查最终地址是否是阿里云OSS域名、HTTPS是否正常、响应状态是否为200、Content-Type是否是image/png或image/jpeg，以及文件是否被正确写入。

不要把OSS地址又拼回当前站点域名；
不要把临时本地路径写入文章内容；
确认文件扩展名和真实图片格式一致。

懒加载要保留首屏封面

文章列表中的非首屏图片可以懒加载，但首页首张轮播图和文章详情页封面不宜完全依赖延迟脚本。建议保留真实src或可用的占位src，并让脚本失败时仍然有默认图可显示。

排查跨域和缓存问题

如果OSS图片直接打开正常，但页面中显示失败，可能与浏览器缓存、混合内容、响应头或图片地址被转义有关。可以用浏览器网络面板查看请求状态、响应类型和最终请求URL，而不是只看页面源码。

上传时限制图片大小和格式

图片上传接口应限制文件大小、MIME类型和尺寸范围。太大的封面会拖慢首页，错误格式可能导致浏览器无法解码。上传成功后可统一生成压缩版本或设置合理的缓存策略。

发布前做图片回归检查

每次发布文章后，至少检查封面地址、正文图地址、移动端比例和加载失败兜底。自动化脚本可以对OSS地址发HEAD或GET请求，并检查页面是否包含这些地址，减少发布后才发现图片全空的情况。

总结

AI网站处理图片加载失败，应该采用“默认图兜底、OSS地址检查、懒加载分层、上传限制和发布回归”的组合方案。先保证页面稳定，再定位资源问题，用户体验会更可靠。