React.jsにローカル画像をロードする
Load Local Images React
解決:
作成について質問がある場合ReactAppユーザーガイドを読むことをお勧めします。
それはあなたが持っているかもしれないこれと他の多くの質問に答えます。
具体的には、ローカル画像を含めるには、次の2つのオプションがあります。
インポートを使用する:
//logo.pngがJSファイルと同じフォルダにあると仮定します './logo.png'からロゴをインポートします; // ...後で
このアプローチは、すべてのアセットがビルドシステムによって処理され、本番ビルドでハッシュ付きのファイル名を取得するため、優れています。ファイルを移動または削除した場合にもエラーが発生します。
欠点は、任意のインポートパスを設定できないため、画像が数百個あると面倒になる可能性があることです。
パブリックフォルダを使用します。
//logo.pngがプロジェクトのpublic /フォルダーにあると仮定します
このアプローチは一般的にはお勧めできませんが、何百もの画像があり、それらを1つずつインポートするのが面倒な場合は便利です。欠点は、キャッシュの無効化について考え、移動または削除されたファイルに注意する必要があることです。
お役に立てれば!
で画像をロードしたい場合あなたがしているようにローカル相対URL。 Reactプロジェクトにはデフォルトがあります
パブリックフォルダ。あなたはあなたを置くべきです
中の画像フォルダ。それが動作します。
これを実現するにはさまざまな方法があります。例を次に示します。
'./...'//どこにでもmyimageをインポートします。imgタグでこれをsrcに入れてください:
こちらで公式ドキュメントを確認することもできます:https://facebook.github.io/react-native/docs/image.html