使用从头开始构建的 webpack 反应应用程序不会在 css 中加载图像

Question

I built a simple react app that uses webpack and babel. I am having trouble loading my images. My basic folder structure:

root: 
  webpack.config.js
  package.json

  public:
    index.html

  src:
    800x600-1x2x.jpg
    App.css
    App.js
    index.js

App.js is boilerplate code:

import React, { Component} from "react";
import {hot} from "react-hot-loader";
import "./App.css";

class App extends Component{
  render(){
    return(
      <div className="App">
        <h1> Hello, World!! </h1>
      </div>
    );
  }
}

export default hot(module)(App);

App.css is where I am loading an image into my background:

.App {
    margin: 1rem;
    font-family: Arial, Helvetica, sans-serif;
    background-image: url("./800x600-1x2x.jpg");
    border: 1px solid red;
  }

webpack.config.js: i've tried using url-loader instead of file-loader that did not work

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: { presets: ["@babel/env"] }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: "file-loader"
      }
    ]
  },
  resolve: { extensions: ["*", ".js", ".jsx"] },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 3000,
    publicPath: "http://localhost:3000/dist/",
    hotOnly: true
  },
  plugins: [new webpack.HotModuleReplacementPlugin()]
};

Looking through chrome sources I can see webpack:// is doing something with the image if I click on the 800x600-1x2x.jpg I get this code:

__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "0e5cf6190f4b1586fb587bc9e9577981.jpg");

Selecting App element and looking at the css rules I see this crossed out:

background-image: url([object Module]);

Things that I tried and did not work:

placing the image in the public folder that didn't do anything.

creating a dist folder and putting the image in that folder.

installed html-loader and included it in webpack:

  {
    test: /\.html$/,
    loader: 'html-loader'
  },

installed resolve-url-loader and included it in webpack:

  {
    test: /\.css$/,
    loader: ["style-loader", "css-loader", "resolve-url-loader"]
  },

Other info:

I am also not building a bundle.js the webpack is compiling at runtime.

I am using this to run my webpack: webpack-dev-server --mode development

I looked around other stackoverflow answers and didn't see anything that worked for me. What am I missing?

Answer 1

It looks like the relative paths are incorrect. Your assets should be placed inside your source folder, not in the root.

This structure should work with your current webpack config

root: 
  webpack.config.js
  package.json


  public:
    index.html

  src:
    index.js
    800x600-1x2x.jpg
    App.css
    App.js

Answer 2

So I dug deep in webpacks documentation and other online projects for a whole day yesterday only to realize that my dependencies were out of date... However all the effort I put in was not a lost cause, I created a much better and cleaner set up that will work with a react app and load css and images. Enjoy. -.-

package.json:

  "devDependencies": {
    "@babel/cli": "^7.1.0",
    "@babel/core": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.2",
    "css-loader": "^3.4.0",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^1.1.1",
    "url-loader": "^3.0.0",
    "webpack": "^4.41.4",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.10.1"
  },
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-hot-loader": "^4.3.11"
  }

folder structure:

public
  800x600-1x2x.jpg
  index.html

src
  App.css
  App.js
  index.js

webpack.config.js:

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: { presets: ["@babel/env"] }
      },
      {
        test: /\.css$/,
        loader: ["style-loader", "css-loader"]
      },
      {
        test: /\.(jpg)$/i,
        loader: "url-loader"
      }
    ]
  },
  devServer: {
    hot: true,
    open: true,
    port: 3000,
    proxy: {"/": "http://localhost:5000"},
    contentBase: path.resolve(__dirname, "public"),
    publicPath: "/"
  },
  plugins: [
    new HtmlWebpackPlugin({
        template: path.resolve(__dirname, 'public/index.html'),
        inject: true
    })
  ]
};

To make a css file work one has to import it inside your .js Example my index.js:

import "./App.css"
import App from "./App.js"
ReactDOM.render(<App/>, document.getElementById("root"));

From there my css file loads an image through my directory path:

background: url("../public/800x600-1x2x.jpg");

Loading an image in html through the img tag is as usual(warning below):

<img src="800x600-1x2x.jpg">

Warning: the img tag wont load an image when using a proxy with no real backend.

However, we are using react components so we can/should load an image inside our components jsx.

First import the image and then use the image tag. Example:

import background from '../public/800x600-1x2x.jpg'

const App = () => <img src={background}></img>