反応プロジェクトに画像を追加しようとしたときにエラーが発生しました

Question

私は反応プロジェクトに取り組んでいます。私は自分のコンポーネントの1つにイメージを追加しようとしています。プロジェクト構造ツリーに「images」という名前のディレクトリを作成し、このディレクトリに画像を配置しました（プロジェクト構造のイメージは以下に添付されています）。私はこのイメージをimgタグにsrcとして渡したいと思います。私はイメージを右クリックして "イメージパスをコピー"を選択し、そのパスをimgタグのsrcにペーストしました。しかし、それを実行しようとすると、「リソースをロードできませんでした：サーバーが404（Not Found）のステータスで応答しました」というエラーが表示されます。ここに私のコンポーネントのコードとプロジェクト構造のスクリーンショットがあります。

P.S.私はUbuntuの環境の午前

export default class CustomizedAppComponent extends Component { 
    render(){ 
     return(
      <div> 
       <img src="/home/user/Documents/Tessact-Master/dev/js/images/logo.png"/> 
      </div> 
     ); 
    } 
} 

画像のすべてSRCの

Answer 1

あなたのURLで../使用したり、必要とする必要はありません。.. SIMPLE TRICK：それはあなたがアプリあなたにサービスを提供しているところから非常に重要です。あなたはTessactマスターからあなたのアプリを提供しているなら、あなたは、コード

使用下に、次のようにただ/devない./dev

export default class CustomizedAppComponent extends Component { 
    render(){ 
     return(
      <div> 
       <img src={"/dev/js/images/logo.png"}/> 
      </div> 
     ); 
    } 
} 

Answer 2

まず、それはで使用されているコンポーネントの場所に相対的でなければなりません。componentsまたはcontainersフォルダにあることがCustomizedAppComponentを想定すると、コンポーネントがある場合は、あなたのイメージパスがフォルダcomponents内の別のフォルダ内に再び

"../images/logo.png"/ 

のように見える必要があり、その後、としてパスを与えます

"../../images/logo.png"/    // add '../' so on 

はまた、あなたがあなたのJSXと場合は、以下のコードではありませんし、その後 omit requireをtranspileするWebPACKのを使用している場合 require内SRCを言及する必要があるかもしれません反応します。

export default class CustomizedAppComponent extends Component { 
    render(){ 
     return(
      <div> 
       <img src={require("../images/logo.png")}/> 
      </div> 
     ); 
    } 
}