ReactJS + Webpack：なぜキャッチされないエラー： "../media/interiorTest.jpg"というモジュールが見つかりませんか？

Question

私はReactJSで実行しているのWebPACKを持っている、と私はイメージをつかむと、それを表示しようとするが、エラーを取得しています：Uncaught Error: Cannot find module "../media/interiorTest.jpg"

そして、ここでは、私が試したものです：

<div> 
    <img src={require("../media/interiorTest.jpg")}/> 
    </div> 

とディレクトリツリーがあります（私はhome-page.jsからinteriorTest.jpgを取得しようとしています）：

そして、私のwebpack.config.jsです：

webpack.config.jsのコードとあなたが含まスクリーンショットを見ることによって

const webpack = require('webpack'); 
const path = require('path'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

const config = { 
    context: __dirname, 
    entry: './src/index.js', 
    output: { 
    path: __dirname, 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     exclude: /node_modules/, 
     test: /\.(js|jsx)$/, 
     loader: 'babel' 
     }, 
     { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract('css!sass') 
     } 
    ] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    contentBase: './' 
    }, 
    plugins: [ 
    new webpack.DefinePlugin({ 'process.env':{ 'NODE_ENV': JSON.stringify('production') } }), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { warnings: false }, 
     output: {comments: false }, 
     mangle: false, 
     sourcemap: false, 
     minimize: true, 
     mangle: { except: ['$super', '$', 'exports', 'require', '$q', '$ocLazyLoad'] } 
    }), 
    new ExtractTextPlugin('src/public/stylesheets/app.css', { 
     allChunks: true 
    }) 
    ] 
}; 

module.exports = config; 

Answer 1

、あなたのディレクトリ構造は

app/ 
    src/ 
     actions/ 
     components/ 
     ... 
     public/ 

のように見え、webpack.config.jsに、あなたは、このコードに

devServer: { 
    historyApiFallback: true, 
    contentBase: './' 
    }, 

contentBase性質を持っていますサーバーが実行されているときにファイルがロードされるディレクトリを定義します。また、i tを'./'とすると、ファイル/データがappディレクトリからロードされることを意味します。

そして、それはあなたにもパスに/src/publicを含める必要がpublicディレクトリからファイルをリンクする理由は、この場合、src="/src/public/folder/where/image/is-located/image.jpg"

のようなもの

<div> 
    <img src="/src/public/media/interiorTest.jpg" alt="" /> 
    </div> 

注

• です

  通常、コードは2つのフォルダ、作業中のコードを格納すると、コンパイル済みコードを格納するwebpackと静的資産のためのpublicがあります。そして、我々はcontentBaseとして/publicを設定します。

  最高のイメージを説明して、画像のためのalt=""を持っているために、その良い反応とJavaScriptアプリケーション

• のディレクトリ構造に関するいくつかの研究を行うためにあなたの時間は、ちょうどaltテキストを入力する価値があるだろう。