Webpack - Require Images Using File-Loader

Question

I am using Webpack for my React app.

I installed 'File-loader' & 'Url-loader' in my webpack config.

However, Im not sure how to link images to my components. I am holding the 'src' for the image in a 'Data.js' file from where I pass the data for the image to the react component.

My webpack.config.js:

...
const PATHS = {
    app : path.join( __dirname, "app" ),
    build : path.join( __dirname, "build" )
};

const common = {
    entry : {
        app : PATHS.app
    },
    output : {
        path : PATHS.build,
        filename : "bundle.js"
    },
    module : {
        preLoaders : [
...
        loaders : [
            {
                test : /\.css$/,
                loaders : [ "style", "css" ],
                include : PATHS.app
            },
            {
                test : /\.jsx?$/,
                loader : "babel",
                query : {
                    cacheDirectory : true,
                    presets : [ "react", "es2015" ]
                },
                include : PATHS.app
            },
            {
                test : /\.(jpg|png)$/,
                loader : "file-loader?name=[name].[ext]",
                include : PATHS.app
            }
...

Im my react presentation component, Im simply using require to retrieve the image:

const PreviewTemImgParent = ({ data }) => {
    let img = require( data.get( "src" ));
    return(
        <div className = "card previewImgParent">
            <img
             src = { img }
    ...

The Data.js file has absolute paths (main app folder) for each image (I may be going wrong here):

export const previewTemImgData = Map({
    body : List.of(
        Map({   // using immutable.js
            src : "app/css/asset/template/png/body/GatheredAtEmpireLine.png",
            alt : "image",
            className : "flipParent",
...

Global directory image for what its worth:

I wonder where I am making the mistakes and how to resolve this?

EDIT : After reading around, I figure that webpack needs reference for the relative position of the image, so I have amended webpack.config.js to following:

...
output : {
  path : PATHS.build,
  publicPath : "/",
  filename : "bundle.js"
}
...

However, that doesnt solve the problem. Guidance would be much appreciated.

Answer 1

webpack doesn't support asynchronous resource now, it means if you want to require image, you should just send the path of image to it. just like this way:

let img = new Image();
img.src = require('./images/1.jpg');

the url of image cann't be a variable, because when webpack bundle your code, it doesn't run your code, so it cann't be know the value of your variable.

if you really want to require asynchronously. you can try to use require.ensure

Answer 2

Suggestions:

1.Use url-loader for images.
By specifying the limit in your webpack configuration, such as: url-loader?limit=8000, if the file is smaller than 8000 Byte. the url-loader works seem as file-loader. Embed the files to the bundle output for the main entry. If not, see point 2.

2.Use url(address) in css/scss for use images
Here is an example which is powered by Webpack and url-loader:
background: url('../images/heroBanner.png') no-repeat center center fixed;

And because the file is large enough, webpack transform the file just like other bundles to the output directory. It will send an HTTP request for this image when the web page is loading.

https://github.com/EcutDavid/EcutDavid.github.io/blob/8346f18dccdae18c4d6e98eb9b8cc51d62338cb5/src/styles/Header.scss#L2