React.jsにローカル画像をロードする



Load Local Images React



解決:

作成について質問がある場合ReactAppユーザーガイドを読むことをお勧めします。
それはあなたが持っているかもしれないこれと他の多くの質問に答えます。

具体的には、ローカル画像を含めるには、次の2つのオプションがあります。



  1. インポートを使用する:

    //logo.pngがJSファイルと同じフォルダにあると仮定します './logo.png'からロゴをインポートします; // ...後で ここに画像の説明を入力してください 

このアプローチは、すべてのアセットがビルドシステムによって処理され、本番ビルドでハッシュ付きのファイル名を取得するため、優れています。ファイルを移動または削除した場合にもエラーが発生します。



欠点は、任意のインポートパスを設定できないため、画像が数百個あると面倒になる可能性があることです。

  1. パブリックフォルダを使用します。

    //logo.pngがプロジェクトのpublic /フォルダーにあると仮定します  

このアプローチは一般的にはお勧めできませんが、何百もの画像があり、それらを1つずつインポートするのが面倒な場合は便利です。欠点は、キャッシュの無効化について考え、移動または削除されたファイルに注意する必要があることです。



お役に立てれば!


で画像をロードしたい場合あなたがしているようにローカル相対URL。 Reactプロジェクトにはデフォルトがありますパブリックフォルダ。あなたはあなたを置くべきです中の画像フォルダ。それが動作します。


これを実現するにはさまざまな方法があります。例を次に示します。

'./...'//どこにでもmyimageをインポートします。

imgタグでこれをsrcに入れてください:

   

こちらで公式ドキュメントを確認することもできます:https://facebook.github.io/react-native/docs/image.html