画像がwebpack経由で処理された後に表示されない

Question

Reactアプリケーションで画像をバンドルするためにwebpackを使用し始めましたが、ブラウザに表示されません（<img/>タグがありますが画像はありません）。私が "webpack"を実行すると、画像はパブリックフォルダにハッシュされた名前で表示され、 "webpack-dev-server"を実行すると画像がバンドルされていることが示されますが、ブラウザーには何も表示されません。 これは私のWebPACKの設定ファイルです：

module.exports = (env) => { 
const isProduction = env === 'production'; 
const CSSExtract = new ExtractTextPlugin('styles.css'); 

return { 
    entry: ['babel-polyfill', './src/app.js'], 
    output: { 
     path: path.resolve(__dirname, './public/scripts'), 
     filename: 'bundle.js' 
    }, 
    module: { 
      rules: [{ 
       loader: 'babel-loader', 
       test: /\.js$/, 
       exclude: /node_modules/ 
      }, 
      { 
       test: /\.(png|jp(e*)g|svg)$/, 
       use: [{ 
        loader: 'url-loader', 
        options: { 
         limit: 8000, // Convert images < 8kb to base64 strings 
         name: 'images/[hash]-[name].[ext]' 
        } 
       }] 
      }, 
      { 
      test: /\.s?css$/, 
      use: CSSExtract.extract({ 
       use : [ 
        { 
         loader : 'css-loader', 
         options : { 
          sourceMap : true // source map for css in development 
         } 
        }, 
        { 
         loader : 'sass-loader', 
         options : { 
          sourceMap : true 
         } 
        }, 
        { 
         loader: "jshint-loader" 
        } 
       ] 
      }) 

     }, 
     ] 
    }, 
    plugins : [ 
     CSSExtract, 
    ], 
    devtool: isProduction ? 'source-map' : 'cheap-eval-source-map', // source map for locating a bug in source files, not in the bundle 
    devServer: { 
     contentBase: path.join(__dirname, "public"), 
     publicPath: "/scripts/", 
     historyApiFallback: true // this line is for client-side routing 
    }, 
} 

}

、これは私が自分のアプリケーションに画像を追加する方法です：

import img1 from '../../assets/img/ticket.jpg'; 

、これは私がrender()方法でそれを使用する方法です。

<img src={img1}/> 

と私は、ブラウザのデベロッパーツールでこれを見たが、画像自体は表示されません。

<img src="images/9011429377e91d003e5b64251ac3b9a8-ticket.jpg"> 

私はそれを修正して画像を表示することができますどのように？

Answer 1

こんにちは私はこれが役立つかどうかわかりません。イメージをインポートするときに、私は少し違うことをし、生成された数字を使う代わりにイメージの名前を使用します。

私はアプリケーションスクリプトに入れます。

import '../../assets/img/ticket.jpg'; 

次にレンダリング方法を入れます。

// notice the slash as the front of the "src" 
<img src="/assets/ticket.jpg"> 

そして、私のWebPACKに私はこれがあります。

{ 
    test: /\.(png|jpg|gif|json|xml|ico|svg)$/, 
    use: [ 
     { 
     loader: 'file-loader', 
     options: { 
      name: '[name].[ext]', 
      outputPath: 'assets/', 
      publicPath: '/' 
     } 
     } 
    ] 
    }