How to get GitHub pages to serve my images

Question

I made a react app (not using create react app) using web pack. I managed to get it to GitHub pages by building it to a "build" folder and using the gh-pages module. However, on the gh-pages module, even though it seems the images are present, they won't show up.

https://github.com/harry-z-huang/restaurant-v2.git

Additionally, if anyone has any advice on how to deploy a web pack app properly, that would be appreciated. I'm pretty sure my method by building it into a build folder is wrong, but building to the root like some solutions suggest doesn't work.

Here is my package json

"name": "reactappscratch",
  "version": "1.0.0",
  "homepage": "https://harry-z-huang.github.io/restaurant-v2/",
  "repository": {
    "url": "git+https://harry-z-huang.github.io/restaurant-v2/"
  },
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon --watch src --exec 'webpack-dev-server --mode development --hot --open'",
    "build": "webpack --mode production",
    "deploy": "npm run build && gh-pages -d build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/material": "^5.11.7",
    "@reduxjs/toolkit": "^1.9.2",
    "css-loader": "^6.7.3",
    "jquery": "^3.6.3",
    "morgan": "^1.10.0",
    "pg": "^8.9.0",
    "react-redux": "^8.0.5",
    "style-loader": "^3.3.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.12",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
    "babel-loader": "^9.1.2",
    "express": "^4.18.2",
    "gh-pages": "^5.0.0",
    "nodemon": "^2.0.20",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-refresh": "^0.14.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  }
}

Here is my web pack config

onst path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/build',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
        },
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

The images serve when I run "npm start" on local host, but it doesn't work on GitHub pages.

score 0 · Answer 1 · answered Jul 27 '23 at 05:51

Using the built-in Asset Modules for Loading Images
There are public and build directories in your project. It seems duplicated, we keep the public as the directory for bundle files, and remove the build directory.
Use html-webpack-plugin to simplify creation of HTML files to serve your webpack bundles.
Create a images directory in the src directory and move the images from the public directory to it. Since we use the asset module handle our images, we need to use const MyImage = require('./src/images/DSC04213.JPG') to load the image.

That image will be processed and added to your output directory and the MyImage variable will contain the final URL of that image after processing.

So, change the value of image property in Database.js file from to below:

Database.js:

  {
    id: 1,
    engName: "Gyoza",
    engDescription: "Korean dumplings made with pork",
    korName: "Gyoza",
    korDescription: "Some korean words here",
    price: 10.99,
    allergy: "",
    spice: 0,
    image: require("./src/images/DSC04218.JPG"),
  },
  // others are same
]

After building, the project structure is:

$ tree -L 2 -I node_modules
.
├── Database.js
├── package-lock.json
├── package.json
├── public
│   ├── 52a2ed3e6d0aaeb9d35c.JPG
│   ├── 6f929b36d64904f2a8a8.JPG
│   ├── index.html
│   ├── main.411c363b8dc4e906dc55.js
│   └── main.411c363b8dc4e906dc55.js.LICENSE.txt
├── server.js
├── src
│   ├── app
│   ├── components
│   ├── images
│   ├── index.html
│   └── index.js
└── webpack.config.js

webpack.config.js:

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: __dirname + "/public",
    filename: "[name].[contenthash].js",
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
        },
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
};

npm scripts:

"scripts": {
  "start": "nodemon --watch src --exec 'webpack-dev-server --mode development --hot --open'",
  "build": "webpack --mode production",
  "deploy": "gh-pages -d public"
},

Deploy:

> gh-pages -d public

Published

The URL of the image is like this: https://mrdulin.github.io/restaurant-v2/52a2ed3e6d0aaeb9d35c.JPG

source code: https://github.com/mrdulin/restaurant-v2

How to get GitHub pages to serve my images

1 Answers1