AWS Amplify部署React Vite应用后JPEG图片无法加载问题

针对你遇到的本地正常、部署后image_2.jpeg无法显示的问题，按以下方向排查解决：

• 检查文件名大小写
  AWS Amplify依赖的S3存储是大小写敏感的，而本地Windows/macOS文件系统默认不区分大小写。确认代码中引用的./assets/images/image_2.jpeg和public目录下实际的文件名完全一致，包括后缀的大小写（比如别写成image_2.JPEG）。

• 确认Vite资源配置
  检查vite.config.ts的assetsInclude配置，确保包含.jpeg后缀，避免Vite构建时遗漏该文件：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
    plugins: [react()],
    assetsInclude: ['**/*.jpeg'] // 明确包含jpeg格式
  });
  

• 修改资源引用路径
  Vite中public目录下的资源推荐使用绝对路径引用，替换相对路径的./为根路径/：

  <img src="/assets/images/image_2.jpeg" />
  

  部署后应用的根路径可能和本地开发环境不同，相对路径容易出现解析错误。

• 清除Amplify缓存并重新部署
  若之前部署过错误的资源，Amplify的CDN可能缓存了无效路径。在Amplify控制台执行：

  1. 触发一次全新部署（应用设置 -> 部署 -> 重新部署此版本）
  2. 手动清除CDN缓存（应用设置 -> 缓存管理 -> 创建缓存刷新）

• 检查S3文件权限
  登录AWS S3控制台，找到托管应用的存储桶，定位到assets/images/image_2.jpeg，确认文件的对象权限设置为公开可读（Amplify托管的静态资源默认应配置此权限，但可能因上传异常导致权限缺失）。

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