带有WebPack的静态图像未加载

Question

我正在使用webpack进行react，我很难获得静态图像。加载器似乎正正确地将图像转换为URL，但是当页面呈现时，它似乎并不像IMG SRC一样起作用。图像的相对路径是正确的。这是我的代码：

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;

我尝试使用URL-Loader和File-Loader尝试了许多不同的方法，但我还没有运气。我很高兴为此提供一些帮助！

谢谢。

Answer 1

从同一文件类型上运行两次url-loader的WebPack配置中看起来像是。这可能会破坏您的图像输出。

Answer 2

您看到的是图像的base64编码。我不熟悉" url-loader"，但是快速查看他们的页面说它将图像加载为base64。您可以在此处找到一些有用的信息：https：//css-tricks.com/data-uris/如果您喜欢图像路径而不是base64，则可能需要考虑其他加载程序。希望它有帮助。