反応プロジェクトの画像に問題があります。確かに、私はいつもsrc属性への相対パスはファイルアーキテクチャ上に構築されていると思っていました

ここに私のファイルアーキテクチャ：

components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
... 

ただし、パスがURLに基​​づいて構築されていることに気付きました。私のコンポーネントの1つ（たとえば、file1.jsx内）には次のようになっています。

localhost/details/2
<img src="../img/myImage.png" /> -> works

localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't work, images are not displayed

この問題を解決するにはどうすればよいですか？react-routerで処理されるどのような形式のルートでも、すべての画像を同じパスで表示できることを望んでいます。

ファイルシステムではなく、現在のURLに対する相対URLを使用しています。絶対URLを使用してこれを解決できます

<img src ="http://localhost:3000/details/img/myImage.png" />

しかし、www.my-domain.bikeやその他のサイトにデプロイする場合は、これは適切ではありません。サイトのルートディレクトリに関連するURLを使用する方が良いでしょう

<img src="/details/img/myImage.png" />

create-react-app画像の相対パスの作業にいないようです。代わりに、画像をインポートできます。

import logo from './logo.png' // relative path to image 

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

create-react-appを使用してプロジェクトを作成した場合、パブリックフォルダーにアクセスできます。したがってimage、パブリックフォルダー内にフォルダーを追加する必要があります。

public / images /

<img src="/images/logo.png" />

でcreate-react-appあり、パブリックフォルダ（とのindex.htmlが ...）。そこに「myImage.png」を配置した場合、たとえばimgサブフォルダの下に置くと、次のようにアクセスできます。

<img src={window.location.origin + '/img/myImage.png'} />

1. src（/ src / images）内に画像フォルダを作成し、その中に画像を保存します。次に、この画像をコンポーネントにインポートします（相対パスを使用）。以下のように

   import imageSrc from './images/image-name.jpg';

   そして、あなたのコンポーネントで。

   <img title="my-img" src={imageSrc} alt="my-img" />

2. 別の方法は、パブリックフォルダーに画像を保持し、相対パスを使用してそれらをインポートすることです。このためには、パブリックフォルダーに画像フォルダーを作成し、その中に画像を保存します。そして、コンポーネントで以下のように使用します。

   <img title="my-img" src='/images/my-image.jpg' alt="my-img" />

   どちらの方法も機能しますが、ビルド時にクリーンな方法と画像がwebpackによって処理されるため、最初の方法をお勧めします。

私の場合、次のコードも機能します。

<img src={require('../logo.png')} alt="logo" className="brand-logo"/>

古い回答の一部は機能しませんが、他の回答は優れていますが、要約するとテーマを説明しません。

画像が「公開」ディレクトリにある場合

例： \public\charts\a.png

HTML：

<img id="imglogo" src="/charts/logo.svg" />

JavaScriptの場合：

新しいimgに動的にイメージを作成します。

var img1 = document.createElement("img");  
img1.src = 'charts/a.png';  

IDが「img1」の既存のimgに画像を動的に設定します。

document.getElementById('img1').src = 'charts/a.png';

画像が「src」ディレクトリにある場合：

例： \src\logo.svg

JavaScriptの場合：

import logo from './logo.svg';  
img1.src = logo;  

jsxの場合：

<img src={logo} /> 

次のように、公式の使用方法に従ってファイルローダーnpmをwebpack.config.jsに追加します。

config.module.rules.push(
    {
        test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'file-loader',
                options: {}
            }
        ]
    }
);

私のために働いた。

コンポーネントに画像をインポートする

import RecentProjectImage_3 from '../../asset/image/recent-projects/latest_news_3.jpg'

そして、イメージsrc = {RecentProjectImage_3}のイメージ名をオブジェクトとして呼び出します

 <Img src={RecentProjectImage_3} alt="" />

友人がこれを行う方法を次のように教えてくれました：

「./」は、画像を要求するファイル（「example.js」など）がフォルダー「images」とフォルダーツリー構造内で同じレベルにある場合に機能します。

たとえばpublic / img / logo.pngの下のパブリックフォルダーにロゴを配置し、パブリックフォルダーを％PUBLIC_URL％として参照します。

<img src="%PUBLIC_URL%/img/logo.png"/>

上記の％PUBLIC_URL％の使用はpublic、ビルド中にフォルダーのURLに置き換えられます。publicフォルダー内のファイルのみがHTMLから参照できます。

「/img/logo.png」や「logo.png」とは異なり、「％PUBLIC_URL％/ img / logo.png」は、クライアント側のルーティングとルート以外のパブリックURLの両方で正しく機能します。を実行して、ルート以外のパブリックURLを構成する方法を学びますnpm run build。