CODEWITHSUNDEEP
javascriptreactjswebpack
pmp1321
pmp1321

Reputation: 49

React / Webpack local images are not found

React / Webpack local images are not loading. Error: Failed to load resource: the server responded with a status of 404 (Not Found)

My images are not loading on my react app. Several hours of troubleshooting and I am still stuck, I would appreciate any advice you all have. I am believe the problem is rooted in my webpack config.

My project structure:

frontend
├── src
│   ├── components
│     └── Header.js
├── static
│   ├── frontend
|        └── index.html
|        └── index.css
|        └── favicon.ico
│        └── images
|            └── BendingFigure.png
├── package.json
├── package-lock.json
├── babel.config.json
└── webpack.config.js

Header.js includes this line of code

<img src="../../static/frontend/images/BendingFigure.png" />

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Freestand</title>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="index.css" />
        <link rel="shortcut icon" href="favicon.ico">
        
    </head>
    <body>
        <div id="main">
            <div id="app"></div>
        </div>

        <script src="main.js"></script>
    </body>
</html>

Webpack config

const path = require("path");
const webpack = require("webpack");
const DEVELOPMENT = process.env.NODE_ENV === "development";
const PRODUCTION = process.env.NODE_ENV === "production";
const PUBLIC_PATH = "/static/frontend/";
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/frontend"),
    filename: "main.js",
    publicPath: PUBLIC_PATH,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        loader: "file-loader",
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  devServer: {
    port: 8080,
    contentBase: path.join(__dirname, "./static/frontend/"),
    publicPath: PUBLIC_PATH,
    inline: true,
    hot: true,
    historyApiFallback: true,
  },

  plugins: [
    new webpack.DefinePlugin({
      "process.env.PRODUCTION": JSON.stringify(PRODUCTION),
      "process.env.DEVELOPMENT": JSON.stringify(DEVELOPMENT),
    }),
  ],
};

I have tried to change the image path and that didnt work, neither did adding file-loader rule to the webpack config. I think my problem is something to do with the public path in the webpack config.

Upvotes: 2

Views: 4245

Answers (2)

Kelvin Schoofs
Kelvin Schoofs

Reputation: 8718

Since your website root is basically at static/frontend (that's where your index.html is), your image URLs should be relative to that folder. In this case, that means using e.g. ./images/BendingFigure.png.

I also suggest reading Webpack's Asset Management guide, as it basically allows you to "import" images in your code. You won't actually import the image, but a public URL to it. The images will then get outputted along your bundled code in your output directory.

Upvotes: 1

user16435030
user16435030

Reputation: 

  devServer: {
    contentBase: // where you've output your files
    contentBasePublicPath: '/',
    publicPath: '/'
  }

Make sure that your PUBLIC_PATH environment variable is actually the same as your output directory, in this case /.

Then only call your image using src='/images/example.jpg' without all the rest.

Upvotes: 2

Related Questions