使用CloudFront与AWS S3实现HTML响应式图片问题求助

以下是针对你遇到问题的具体排查和解决步骤：

• 修复URL中的空格问题
  你提供的source图片URL包含空格（Consorcio Volvo），虽然部分浏览器会自动转义，但这是潜在的解析隐患。建议将空格替换为%20或者下划线，比如把Consorcio Volvo修改为Consorcio%20Volvo，确保URL能被浏览器正确识别。

• 明确指定资源类型
  在source标签中添加type="image/webp"属性，明确告知浏览器当前资源的MIME类型，避免因类型识别错误导致图片不加载：

  <picture>
    <source 
      srcset="https://files.agenciaarara.com.br/files/banners/Consorcio%20Volvo8ff9792c-b45e-4caa-9c16-2f7b2e293dcf-Consorcio%20Volvo7ee23acc-b333-4616-9528-2db88ea0bfca-fiat_banner-site_varejo_fastback-toro_desktop.webp" 
      media="(min-width: 768px)"
      type="image/webp"
    >
    <img src="https://files.agenciaarara.com.br/files/banners/Consorcio Volvo246d65aa-de68-4553-abf4-74fd9cd65db3-download.png" alt="teste" class="w-100">
  </picture>
  

• 验证图片可访问性
  直接在浏览器地址栏打开source对应的WebP图片URL，确认能正常加载：

  • 如果无法加载，先排查S3桶权限（确保桶策略允许CloudFront访问，Origin Access Identity配置正确）；
  • 同时检查CloudFront缓存，若存在旧的错误响应，手动刷新对应图片的缓存。

• 检查CloudFront的MIME类型配置
  登录CloudFront控制台，找到对应分发的行为设置，确认已为WebP文件配置正确的MIME类型（image/webp）。若Content-Type返回错误，浏览器无法正确解析图片，会导致source资源不加载。

• 排查媒体查询与样式干扰

  • 调整浏览器窗口宽度到768px以上，打开开发者工具的Network面板，查看是否有WebP图片的请求记录；
  • 若使用Next.js，检查全局样式或组件样式是否对picture/img元素设置了display: none、visibility: hidden等隐藏属性，通过Elements面板查看元素的计算样式确认。

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