Webpack的静态图像无法加载

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.

Answer 1

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

Answer 2

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.