Reactjsローカルイメージがロードされていません

Question

私はreactjsファイルにイメージをローカルにロードする際に問題があります。どんな助けも素晴らしいだろう。おかげ

が ./src/components/pages/home.js

のコンパイルに失敗しました

モジュールが見つかりません：解決できません '../Assets/images/Thomas-overlay3.jpg' C」に： \ Users \ tcmar \ Documents \ ThomasWebsite \ mywebsite \ src \ components \ pages '

このエラーはビルド時に発生したため、破棄できません。

私のコード：

import React, { Component } from 'react'; 

class Home extends Component { 
    render() { 
    return (
     <div className="container"> 
     <div className="hero-image"> 
      <img src={require('/src/Assets/images/Thomas-overlay3.jpg')} alt="hero-image" /> 
     </div> 
     <div className="hero-text"> 
      Hello, My Name is <span>Thomas</span> 
     </div> 
     </div> 
    ); 
    } 
} 

export default Home; 

Answer 1

あなたの資産は、サーバによってであるとして提供され、いくつかのpublic/フォルダに行く必要があります。

次に、あなただけの実際のリソース参照することができます。しかし、これは、ファイルをロードし、コピーを放出する

<img src={require("file-loader!./file.png")} /> 

：

... 
<img src="/assets/my-image.jpg" /> 
... 

それとも、あなたがwebpacks file-loaderを使用してのようにそれを読み込むことができますがパブリックフォルダに自動的に、これが必要な場合は、

詳細：https://github.com/webpack-contrib/file-loader