CODEWITHSUNDEEP
javascriptimagereactjswebpack
Kamil Solecki
Kamil Solecki

Reputation: 1127

Correctly bundled image could not be loaded

I have a very simple React component, that is supposed to display an image. I am also using Webpack for bundling.

It's probably worth noting that I am using ReactJS.NET.

Although the webpack bundle builds properly, and the .jpg generated by webpack is viewable (using Windows Photo Viewer, for example), the image does not display in my View.

When I take a peek into inspector, the html structure is built properly, but I am getting:

"Could not load the image" - when I hover over the image path.

Image error

I made sure that the image path is correct.

Below is my react component:

var React = require('react');
var BackgroundImg = require('./Images/img_fjords.jpg');

class Login extends React.Component {
    render() {
        return (
            <img src={BackgroundImg} />
        );
    }

    componentDidMount() {
        console.log("Mounted");
    }
}

module.exports = Login;

Webpack config:

var path = require('path');
var WebpackNotifierPlugin = require('webpack-notifier');

module.exports = {
    context: path.join(__dirname, 'App'),
    entry: {
        server: './server',
        client: './client'
    },

    output: {
        path: path.join(__dirname, 'Built/'),
        publicPath: path.join(__dirname, 'Built/'),
        filename: '[name].bundle.js'
    },
    plugins: [
        new WebpackNotifierPlugin()
    ],
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "url-loader?limit=10000&mimetype=application/font-woff"
            },
            { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },
            { test: /\.jsx$/, loader: 'jsx-loader?harmony' }
        ]
    },
    resolve: {
        // Allow require('./blah') to require blah.jsx
        extensions: ['.js', '.jsx']
    },

    externals: {
        // Use external version of React (from CDN for client-side, or
        // bundled with ReactJS.NET for server-side)
        react: 'React'
    }
};

Upvotes: 1

Views: 430

Answers (2)

Kamil Solecki
Kamil Solecki

Reputation: 1127

The problem was solved thanks to help from @Luggage.

The webpack.config was wrong, it should have been:

output: {
        path: path.join(__dirname, 'Built/'),
        publicPath: 'Built/',
        filename: '[name].bundle.js'
    },

Upvotes: 1

Chase DeAnda
Chase DeAnda

Reputation: 16441

Well, I can't see your webpack config, but I'm assuming your using all the correct loaders (file-loader, extract-loader, html-loader, url-loader)? The way I handle it is using the webpack-copy-plugin to copy over my images folder so relative paths still work.

Upvotes: 0

Related Questions