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, Nov 26 '17 at 21:08
Can you please try wrapping the logo value in quotes and make the img tag a self closing one? As so: `` without the `` — DSCH, Nov 26 '17 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, Nov 26 '17 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, Nov 26 '17 at 22:46
@DSCH I tried your suggestion and got an 404 like this: GET http://localhost:8000/%7Blogo%7D 404 (Not Found) — Clay Schnars, Nov 26 '17 at 22:54

score 7 · Accepted Answer · answered Nov 26 '17 at 23:04

7

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

answered Nov 26 '17 at 23:04

Andrea Carraro

9,731
5
33
57

2

Mine was breaking because I was running file-loader and url-loader on the same files – rgdigi Jan 26 '20 at 16:59

score 1 · Answer 2 · answered Nov 26 '17 at 21:19

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.com/data-uris/ You might want to consider a different loader if you prefer the image path and not a base64. Hope it helps.

Static images with Webpack not loading

2 Answers2