Static images with Webpack not loading

Question

I am working with React using Webpack and I am having trouble getting static images to load. The loader seems to be correctly converting the image to a URL but it doesn't seem to work as the img src when the page is rendered. The relative path of the images are correct. Here is my code below:

webpack.config.dev.js:

module: {
loaders: [
  {
    test: /\.css$/,
    exclude: /node_modules/,
    loader: 'style-loader!css-loader?localIdentName=[name]__[local]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader',
  }, {
    test: /\.css$/,
    include: /node_modules/,
    loaders: ['style-loader', 'css-loader'],
  }, {
    test: /\.jsx*$/,
    exclude: [/node_modules/, /.+\.config.js/],
    loader: 'babel',
  }, {
    test: /\.(jpe?g|gif|png|svg)$/i,
    loader: 'url-loader',
    options: {
      limit: 25000,
    },
  }, {
    test: /\.json$/,
    loader: 'json-loader',
  }, { 
    test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
],
},

React code

import React, { Component} from 'react';

import styles from './Album.css';

const logo = require('./img/MoP.png');

export class Album extends Component{
  constructor(props){
    super(props);

    console.log(logo);
}

render(){
    return (
        <div className = {styles.album}>
            <div className="row">
                <div className="col-8">
                    <div className="albumInfo">
                        <h6> {this.props.title} </h6>
                        <h6> {this.props.artist} </h6>
                        <h6> {this.props.date} </h6>
                        <h6> Rating: {this.props.rating} </h6>
                        <h6> {this.props.comment} </h6>
                    </div>
                </div>
                <div className="col-4 align-self-center">
                    <img src={logo}></img>
                </div>
            </div>
        </div>
    )
}
}

export default Album;

I have tried a bunch of different ways using the url-loader and file-loader but I haven't had any luck yet. I would appreciate some help on this!

Thank you.

Edit: The output of the console.log(logo) is: data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJhNDVlZjc0ZTc5MjY3ZDZkNzcxMWFjYmI2ZDA1ZGU4Zi5wbmciOw== — Clay Schnars
Can you please try wrapping the logo value in quotes and make the img tag a self closing one? As so: <img src="{logo}"/> without the </img> — DSCH
What do you mean with "doesn't work"? Broken img, no image at all, etc..? Can you see the src image inspecting the DOM with your browser's dev tools? It might be just a CSS issue. — Andrea Carraro
@toomuchdesign The problem is that no image shows up at all. Upon inspecting the element, the base64 encoded string appears in the img src but it the image doesn't get rendered. — Clay Schnars
@DSCH I tried your suggestion and got an 404 like this: GET localhost:8000/%7Blogo%7D 404 (Not Found) — Clay Schnars

Andrea Carraro Andrea Carraro · Accepted Answer · 2017-11-26T23:04:18

Looks like from webpack configuration that you're running twice url-loader over the same file types. This might break your images output.

Static images with Webpack not loading

2 Answers