webpack 및 React를 사용하여 이미지로드

Question

Imact 및 webpack을 사용하여 새로운 기능을 사용할 수 있습니다. 필 요한 반응 파일에 내 자산 디렉토리의 이미지를로드 할 수 없습니다. 로컬 서버에 표시되지만 실행시 내 github 페이지 이미지가 제대로로드되지 않습니다

이 코드는 로컬 서버에서 제대로 작동합니다.

Portfolio.jsx

<img src="../assets/hood.png"/> 

그 반작용 파일에서 내 자산 디렉토리를 필요로 할 수있는 방법이 있습니까? 당신은 그것을 제대로 해결 될 수 있도록 키워드를 필요로 사용할 수 있습니다 https://jcook894.github.io/Portfolio/

Answer 1

:

여기 내 GH-페이지입니다. 이 같은

뭔가 :

<img src={require('../assets/hood.png')}/> 

이를 위해 당신은 당신의 웹팩 설정 파일에 파일 로더를 가질 필요가 작동합니다. 구성은 다음과 같이 보일 것입니다 : jpep, JPG, PNG 및 GIF, 그것은 당신 여기서 filename.ext와 dist 디렉토리에 파일을 복사 할 것이라고

가

module: { 
    loaders: [ 
     {test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel']}, 
     {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'}, 
     {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url?limit=10000&mimetype=application/font-woff'}, 
     {test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'}, 
     {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}, 
     {test: /\.(jpe?g|png|gif)$/i, loader: 'file?name=[name].[ext]'}, 
     {test: /\.ico$/, loader: 'file?name=[name].[ext]'}, 
     {test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'postcss', 'sass?sourceMap']}, 
     {test: /\.json$/, loader: "json"} 
    ] 
} 

알 수 있습니다. dist 폴더에서 이미지를 가져 오는 중이지만 경로가 올바르지 않으면 로더에서 pathName 매개 변수 수정 사항을 확인하십시오.

코드로 테스트하지는 않았지만 일반적인 생각입니다.