ローカルイメージがリアクションに読み込まれない

Question

リアクションにローカルアセットを保存するのが非常に新しい。

私は、ファイル・ローダーと画像ローダーでのWebPACKを設定し、ローカルの画像を保存しますが、何らかの理由でそれが表示されていないようだしました：

import React, { Component } from 'react'; 
import WorkItem from './work-item'; 
import WorkItemsArray from './work-items-array'; 

class Work extends Component { 
    render() { 
    return (
     <div id='work'> 
     <h1>Work</h1> 
     <img src={require('../images/weatherImg.png')}/> 
     <div id='portfolio'> 
      {WorkItemsArray.map(({ url, img, title, description, github }) => { 
      return (
       <WorkItem 
       key={title} 
       url={url} 
       img={img} 
       title={title} 
       description={description} 
       github={github} 
       /> 
      ); 
      })} 
     </div> 
     </div> 
    ); 
    } 
} 

export default Work; 

webpack.config.jsを

var webpack = require('webpack'); 

module.exports = { 
    entry: [ 
    './src/index.js' 
    ], 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader' 
     }, 
     { 
     test: [/\.css$/, /\.scss$/], 
     exclude: /node_modules/, 
     loaders: ['style-loader', 'css-loader', 'sass-loader'] 
     }, 
     { 
     test: /.*\.(gif|png|jpe?g|svg)$/i, 
     use: [ 
      { 
      loader: 'file-loader', 
      options: { 
       name: 'images/[name]_[hash:7].[ext]' 
      } 
      } 
     ] 
     }, 
     { 
     test: /\.(gif|png|jpe?g|svg)$/i, 
     use: [ 
      'file-loader', 
      { 
      loader: 'image-webpack-loader', 
      options: { 
       mozjpeg: { 
       progressive: true, 
       quality: 65 
       }, 
       // optipng.enabled: false will disable optipng 
       optipng: { 
       enabled: false, 
       }, 
       pngquant: { 
       quality: '65-90', 
       speed: 4 
       }, 
       gifsicle: { 
       interlaced: false, 
       }, 
       // the webp option will enable WEBP 
       webp: { 
       quality: 75 
       } 
      } 
      } 
     ] 
     } 
    ] 
    }, 
    resolve: { 
    extensions: ['*', '.js', '.jsx'] 
    }, 
    output: { 
    path: __dirname + '/dist', 
    publicPath: '/', 
    filename: 'bundle.js' 
    }, 
    devServer: { 
    contentBase: './dist', 
    historyApiFallback: true 
    }, 
    plugins: [ 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 
    }) 
    ] 
}; 

FWIW、私はイメージがしていないようですだけという、まったくエラーが届きません読み込み中です。

大変助かりました！

Answer 1

あなたはすべてのエラーを取得していないと仮定するので、次の2つの可能性があります。

1. を画像が表示されていない（理由は絶頂と幅のものとすることができる小さい）のどちらか

2. かコンポーネント<Work />全体がレンダリングされないか、レンダリングされずにレンダリングされ、そのことが検出されることはありません。最初のため

、画像のサイズを強制するか、別の画像置き換える：

：次にブラウザコンソールを確認し、 componentDidMountと componentWillUnmount及びデバッグを追加し、第二のため

<img src={require('../images/weatherImg.png')} width="400" height="500"/> 

を

class Work extends Component { 
    componentDidMount() { 
     console.log(new Date(), ' Work is mouned '); 
    } 

    componentWillUnmount() { 
     console.log(new Date(), ' Work will be killed '); 
    } 
    render() { 
     //... 
    } 
    }