mercredi 29 juin 2016

Webpack - Require Images Using File-Loader

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:

enter image description here

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.

Aucun commentaire:

Enregistrer un commentaire