Vite+React项目部署Github Pages后图片无法显示求助

方案1：修正导入路径与构建配置 #

• 确认Vite配置文件（vite.config.js）的base字段设置正确，你的仓库名为Shutoku-Updates，配置需如下：

  export default defineConfig({
    base: '/Shutoku-Updates/',
    // 其余配置项...
  })
  

• 对于src/assets下的图片，保持当前导入方式（import tatsumiImg1 from '../../assets/imgs/tatsumi1-img1.jpg'），JSX中直接用src={tatsumiImg1}即可。执行npm run build后，检查dist/assets下的图片文件名（Vite会自动添加哈希后缀），确认部署后图片请求路径为https://nneia.github.io/Shutoku-Updates/assets/[哈希后缀的图片名].jpg，核对是否存在路径层级或拼写错误。

方案2：public文件夹资源的正确引用 #

若将图片移至项目根目录的public/assets/imgs下，无需导入，直接用以下方式引用：

<img src={`${import.meta.env.BASE_URL}assets/imgs/tatsumi1-img1.jpg`} alt="tatsumi" />

注意：

• public文件夹需在项目根目录，而非src内部
• 该文件夹下的资源不会被Vite添加哈希后缀，文件名需保持不变

额外检查项 #

• 确认Github Pages部署来源为gh-pages分支，且dist文件夹内容已正确推送至该分支
• 清除浏览器缓存后重新访问部署页面，避免旧缓存导致的路径问题
• 查看控制台404请求的完整URL，对比Github Pages上的实际资源路径，排查是否存在拼写或层级错误

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