ReactJs Image Not found on production mode - reactjs

Question

I have pushed my app on my repo.
The images are imported to the path:
react-blog-app/blob/gh-pages/static/media/_resized_300.353f8ae3.jpg
However on the page the images are not found.
The URL is pointing to
react-blog-app/static/media/_resized_300.353f8ae3.jpg
I have added 'contentBane' on config.json
{
"apiEndpoint": "https://jsonplaceholder.typicode.com/posts" ,
"devServer": {
"contentBase": "./build"
}
}
Do you have any suggestion to fix this issue?
Thanks in advance.

Answer 1

I think you didn't add file-loader to module.rules. the code below is minimal webpack configuration for react app.
webpack.config.js
require("dotenv").config();
const path = require("path");
const webpack = require("webpack");
// Plugins
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
mode: process.env.NODE_ENV || "production",
entry: "./src/index.jsx",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
resolve: { extensions: ["*", ".js", ".jsx"] },
// externals: {
// "react-js": "React",
// "react-dom": "ReactDOM"
// },
module: {
rules: [
{
test: /\.(js|jsx|es6|es|mjs)$/,
include: path.resolve(__dirname, "src"),
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.html$/,
use: ["html-loader"]
},
{
test: /\.css$/,
use: [
"style-loader",
"css-loader",
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ["file-loader"]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: "./src/index.ejs",
filename: "index.html",
title: "My React App",
inject: "body",
scriptLoading: "defer",
cache: true
}),
new webpack.ProgressPlugin()
],
devtool: "source-map",
devServer: {
hot: true,
port: 8000,
open: true
}
};
.babelrc
{
"presets": ["#babel/preset-react"],
"env": {
"development": {
"presets": [["#babel/preset-react", { "development": true }]]
}
}
}
package.json
"scripts": {
"start:dev": "cross-env NODE_ENV=development \"webpack-dev-server\"",
"build": "webpack"
}