React.js の React Router で画像パスの問題を解決するにはどうすればよいですか?

React.js の Img パス解決

React.js では、 の src 属性は、要素には画像の URL が含まれることが期待されます。ただし、場合によっては、特に React Router のコンテキストで、相対パスが正しく解決されていないようです。

次のファイル構造を考慮してください。

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

file1.jsx 内では、次のコードを使用して画像を表示します。

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

localhost/details/2/id
<img src="../img/myImage.png" /> <!-- doesn't work --></p>
<p>ご覧のとおり、相対パスは最初のケースでは機能しますが、2 番目のケースでは機能しません。これは、相対パスがファイル アーキテクチャではなく URL に基づいて解決されるためです。</p>
<p>ルートに関係なく画像が正しく表示されるようにするには、解決策の 1 つは次の構文を使用して画像をインポートすることです。</p>
<pre class="brush:php;toolbar:false">import logo from './logo.png' // relative path to image 

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

イメージをインポートすると、それがバンドルされたリソースとなり、現在のルートに関係なく、すべてのコンポーネントで利用できるようになります。

以上がReact.js の React Router で画像パスの問題を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。