How to render images with webpack + react?

Question

I am fairly new to react and webpack and I am getting this weird problem which I dont understand.

The problem:

When I inspect the image the above is what i see which obviously does not show my image. I am usuing file loader.

my structure:

webpack:

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

const bundlePath = path.resolve(__dirname, "dist/");

module.exports = {
  entry: "./src/index.js",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: { presets: ["env"], plugins: ["transform-class-properties"] },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ["eslint-loader"],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },

      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "file-loader",
            options: {},
          },
        ],
      },
    ],
  },
  resolve: { extensions: ["*", ".js", ".jsx"] },
  output: {
    publicPath: bundlePath,
    filename: "bundle.js",
  },
  devServer: {
    contentBase: path.join(__dirname, "public"),
    port: 8080,
    publicPath: "http://localhost:8080/dist",
    historyApiFallback: true,
  },
  plugins: [new webpack.HotModuleReplacementPlugin()],
};

What am I missing?

EDIT:

import the image like so:

import headerImage from "../../../../public/images/MyImage.jpg"

render like so:

class Header extends Component {
    linkClick = event => {
      if (this.props.properties.movment.position.x > 0) event.preventDefault();
    };
    render() {
      return (

              <Navbar inverse fluid >

              <Navbar.Header>
                <Navbar.Brand>
               <Image src={headerImage}/>
                </Navbar.Brand>
                <Navbar.Toggle />
              </Navbar.Header>

              <Navbar.Collapse>
                <Nav pullRight>
                <HeaderLinks linkClicked={this.linkClick} />
                </Nav>
              </Navbar.Collapse>

              </Navbar>
      );
    }
}

Yeah, post the piece of code how you are importing your image — PlayMa256, Sep 06 '18 at 16:52
I think you should look at this post https://stackoverflow.com/questions/37671342/how-to-load-image-files-with-webpack-file-loader , it seems that `file-loader` is using the `publicPath` property, it could be the solution to your problem — Olivier Boissé, Sep 06 '18 at 17:42
you can try with this output : `output: { publicPath: "/dist/", path: path.resolve(__dirname, "dist"), filename: "bundle.js" }` — Olivier Boissé, Sep 06 '18 at 17:47

Rohit Nethi · Answer 1 · 2018-09-06T17:32:04.723

1

var requireImages = require.context('../public/images', true, /\.(jpg|png|gif|svg)$/);

You can plugin the above code in your index.js file to directly reference your images from anywhere in the application.

You can also go ahead and use <Image src="./public/images/MyImage.jpg" /> in your Header file without having to import each image separately.

Edit: Please check the path and make sure it points to the images in the dist>public>images folder

edited Sep 06 '18 at 17:32

answered Sep 06 '18 at 16:59

Rohit Nethi

119
5

I added this to my indes.js file but I do not undertsand how I should refrence it in my header component? can you give a more detailed explenation please – ThunD3eR Sep 06 '18 at 17:07
see edit. I used the wrong braces and that part got hidden. – Rohit Nethi Sep 06 '18 at 17:08
Still doesnt work, the difference is that the url is now " ../../../../public/images/MyImage.jpg" – ThunD3eR Sep 06 '18 at 17:13
wait. I got confused between the webpack path and the original images path. Let me change that – Rohit Nethi Sep 06 '18 at 17:15
var requireImages = require.context('../public/images', true, /\.(jpg|png|gif|svg)$/); – Rohit Nethi Sep 06 '18 at 17:19
I am waiting for your edit but I wonder if this makes the file loader unnecessary? Also doesnt this increase the loading time since If i understand it correctly all images are fetched at once – ThunD3eR Sep 06 '18 at 17:20
It is an alternative to using file-loader. It pretty much has the same load time as file-loader for lesser number of images. But if you are storing images on the client server rather than on cloud storage, you are already risking higher load times. – Rohit Nethi Sep 06 '18 at 17:24
I did make an edit to the comment. Just reference the path to public/images in the requireImages variable. Don't reference them from dist and you're good. – Rohit Nethi Sep 06 '18 at 17:26
Sorry I couldn't help. I tried running a mock and it worked just fine. Do you have a repo that I could look at? – Rohit Nethi Sep 06 '18 at 18:58
1

Increased the limit of the file loader, see my answer below. Thanks for the attempt! thumbs up! – ThunD3eR Sep 06 '18 at 19:14

score 0 · Accepted Answer · answered Sep 06 '18 at 19:13

This took some time but It would seem that I needed to increase the byte limit to get this to work.

I also changed the webpack confic to as suggester by @Olivier Boissé via the link

test: /\.(jpe?g|png|gif|svg)$/i,
loader: "file-loader?name=/public/images/[name].[ext]",
options: {
  limit: 100000,
},

and also the following:

  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "/dist/",
    filename: "bundle.js",
  },

How to render images with webpack + react?

2 Answers2

Linked