React Appに画像を読み込む際に問題が発生しました

Question

私のsrcフォルダ内にある画像ファイルを読み込もうとしています。私はそうのようApp.jsにロードしています：

import React, { Component } from 'react'; 
import './App.css'; 
import logo from 'images/logo.png'; 

class App extends Component { 
    render() { 
    return (
     <header> 
      <img src={logo} alt={"logo"}/> 
     </header> 
    ); 
    } 
} 

export default App; 

は残念ながら、私はこのエラーを取得する：

./src/App.js 
Module not found: Can't resolve 'logo.png' in '/src' 

私は、このスタックオーバーフローの答えを、このコードに到着：私は何..but https://stackoverflow.com/a/35454832/7386637 ここで間違っている？

Answer 1

あなたは、このようにファイルパスを使用してしたい場合は、あなたのイメージがproject/assets/images/に住んでいると、あなたのWebPACKコンフィグ命場合例えばだから、そう

resolve: { 
    modules: [path.resolve(__dirname, 'PATH_THAT_HOLDS_YOUR_IMAGE_DIRECTORY')] 
    }, 

のように、あなたのWebPACKの設定にresolveプロパティを追加する必要がありますproject/の場合は、PATH_THAT_HOLDS_YOUR_IMAGE_DIRECTORYをassetsに置き換えます。

import logo from 'images/logo.png';を使用すると動作します。 （webpackの設定を変更するためにdev-serverを再起動する必要があることを忘れないでください）

そうしないと、前述のように相対パスが正常に動作します。