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' } 
], 
}, 

は、私は、URLローダおよびファイルベースを使用して、さまざまな方法の束を試してみましたが、コード

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; 

に反応します私はまだ運がありませんでした。私はこれについていくつかの助けに感謝します！

ありがとうございます。

Answer 1

ウェブパックの設定のように、同じファイルタイプに対して2回実行しています（url-loader）。これにより、画像出力が壊れる可能性があります。

Answer 2

あなたが見るものは、画像のベース64エンコーディングです。 私は 'url-loader'に精通していませんでしたが、彼らのクイックルックを確認しましたpage 画像をbase64で読み込んだとします。 ここにいくつかの便利な情報があります：https://css-tricks.com/data-uris/ base64ではなくイメージパスが好きな人は、別のローダーを考えてみてください。それが役に立てば幸い。