로컬 이미지가 로딩되지 않음

Question

리얼에서 로컬 에셋을 저장하는 것은 매우 새로운 기능입니다.

내가 파일 로더 및 이미지 로더 웹팩을 구성하고 로컬 이미지를 저장하지만, 어떤 이유로이 게재하지 않는 것 같습니다했습니다

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

당신이 어떤 오류가 발생하지 않은 가정 때문에, 당신은 두 가지 가능성이 있습니다

가 어느 이미지가 표시되지

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() { 
     //... 
    } 
    }