GitHub Pagesで画像が表示されない GET 404

GitHub Pagesで画像が表示されない問題の解決方法

GitHub Pagesで画像が表示されない問題は、プロジェクトのベースURLが正しく設定されていないことが原因であることが多いです。以下の手順に従って、vite.config.jsファイルとAppコンポーネントを修正することで、この問題を解決できます。

vite.config.jsの修正

vite.config.jsファイルを開き、baseオプションを設定します。これは、GitHub Pages用のベースURLを設定するためのものです。

// vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  define: {                       // この行を追加
    'process.env': {}  　　　　　  // この行を追加
  },                              // この行を追加
  base: process.env.GITHUB_PAGES  // この行を追加
  ? '/portfolio-app/'             // この行を追加（リポジトリ名に変更）
  : './',                         // この行を追加
  plugins: [react()],
})

Appコンポーネントの修正

コンポーネントの中でbaseを使って画像パスを動的に変更します。

1. // App.jsxの場合

import React from 'react';

const App = () => {
  const base = process.env.GITHUB_PAGES ? '/portfolio-app/' : './';

  return (
    <div>
      <img src="/image1.jpg" alt="image1" />           // 表示されない
      <img src={`${base}/image2.jpg`} alt="image2" />  // 表示される
      <h1>Title</h1>
      <p>Text</p>
    </div>
  );
};

export default App;

2. // App.tsxの場合

import React from 'react';

interface AppProps {
  // props の型定義を追加する場合、ここに記述する
}

const App: React.FC<AppProps> = () => {
  const base = process.env.GITHUB_PAGES ? '/portfolio-app/' : './';

  return (
    <div>
      <img src="/image1.jpg" alt="image1" />           // 表示されない
      <img src={`${base}/image2.jpg`} alt="image2" />  // 表示される
      <h1>Title</h1>
      <p>Text</p>
    </div>
  );
};

export default App;

これらの修正を行うことで、GitHub Pages上での画像表示問題が解決されるはずです。baseの値を動的に設定することで、開発環境と本番環境の両方で画像が正しく表示されるようになります。