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.propsment} </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.

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.ment} </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.

• javascript
• reactjs
• webpack
• urlloader

• Edit: The output of the console.log(logo) is: data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJhNDVlZjc0ZTc5MjY3ZDZkNzcxMWFjYmI2ZDA1ZGU4Zi5wbmciOw== – Clay Schnars Commented Nov 26, 2017 at 21:08
• 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 Commented Nov 26, 2017 at 21:36
• 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 Commented Nov 26, 2017 at 21:51
• @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 Commented Nov 26, 2017 at 22:46
• @DSCH I tried your suggestion and got an 404 like this: GET localhost:8000/%7Blogo%7D 404 (Not Found) – Clay Schnars Commented Nov 26, 2017 at 22:54

2 Answers 2

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

What you see is a base64 encoding of the image. I wasn't familiar with the 'url-loader', but a quick look at their page Says that it loads images as base64. You can find some useful info about it here: https://css-tricks./data-uris/ You might want to consider a different loader if you prefer the image path and not a base64. Hope it helps.