反応使用は必要ですか?

react では require を使用できます。正しい使用方法は次のとおりです: 1. "

import user from '../img/user.png'
<img src={user} alt="" />

ログイン後にコピー

1.2 方法 2

2 番目の方法も、より一般的に使用されています。当時、ローカル イメージを読み取るために require メソッドを使用すると、エラーが発生する可能性が高くなります。ここでは、次の方法を使用できます。図のメソッドは次のとおりです:

<img src={require(&#39;../img/icon1.png&#39;)} alt="" />

補足文: require には文字列のみを記述でき、変数は記述できません。

2. require で画像を読み込めない場合の解決策について

2.1 ケース 1

方法 2 で画像を読み込むことができますが、画像を読み込むことができません。実行時にロードされる イメージをロードします。この問題については、オンラインで 2 つの解決策を見つけました。最初の解決策は次のとおりです: ただし、"file-loader" を使用する場合: "^4.2.0" または "file- loader" : "^2.0.0" は正常にパッケージ化できます。後で、新しいバージョンの esModule では file-loader がデフォルトで true になっていることがわかりました。そのため、手動で false

{
  test: /.(png|jpg|gif|jpeg)$/,
  use: [{
  loader: 'url-loader',
  // loader: 'file-loader',
  options: {
  esModule: false, // 这里设置为false
  name: '[name].[ext]',
  limit: 10240 
  } 
  }]
 }

オプション 2 に設定しました (推奨) )

require('~/images/2.png').default

まあまあです

ps: ただし、React Scaffolding 構成を使用する場合は、必要ありません.default を使用しますが、直接 require( url) を使用します。

2.2 ケース 2このケースでは、学習プロセス中に遭遇したことに基づいて、私のニーズを大まかに説明します。 React を使用してバックエンド管理システムを構築しました。その後、ローカル データを json 形式に変換し、React を通じてそれを読み取り、フロントエンド インターフェイスに表示する必要があります。ファイルにはテキストと画像が含まれています。テキストは読みやすいです。方法肝心な時に写真を入手するのが難しいところです。そこで、この困難をどのように克服したかについて話しましょう:

1) まず、以下に示すように、json データの一部をインターセプトしました:

{
  "success": true,
  "msg": "",
  "titleImg": "http:\/\/iwen.wiki\/sxtstu\/blueberrypai\/indexImg\/youjiIcon_38.png",
  "travelnote": [
    {
      "title": "\u8de8\u8d8a\u8d64\u9053\u7684\u871c\u6708\u884c-\u9189\u7f8e\u6bdb\u91cc\u6c42\u65af-1",
      "writer": "\u4f59\u982d\u5c0f\u59d0Rachel",
      "content": "\u82b1\u306e\u6642\u5149\u65c5\u884c \u3010\u6642\u5149\u65c5\u884c\u3011\u5e74\u8f7b\u5c31\u662f \u7528\u6765\u6298\u817e\u7684\uff0c\u6709\u529b\u6c14\u53bb\u60f3\uff0c  \u53bb\u505a\uff0c\u800c\u662f\u4e3a\u4e86\u7a33\u5b9a\u4e22\u6389\u9752\u6625\uff0c\u4e3a\u4e86\u5e73\u6de1\u4e22\u6389\u68a6",
      "img": "http:\/\/iwen.wiki\/sxtstu\/blueberrypai\/indexImg\/youji_38.png"
    },
    {
      "title": "\u8de8\u8d8a\u8d64\u9053\u7684\u871c\u6708\u884c-\u9189\u7f8e\u6bdb\u91cc\u6c42\u65af-2",
      "writer": "\u4f59\u982d\u5c0f\u59d0Rachel",
      "content": "\u82b1\u306e\u6642\u5149\u65c5\u884c \u3010\u6642\u5149\u65c5\u884c\u3011\u5e74\u8f7b\u5c31\u662f \u7528\u6765\u6298\u817e\u7684\uff0c\u6709\u529b\u6c14\u53bb\u60f3\uff0c  \u53bb\u505a\uff0c\u800c\u662f\u4e3a\u4e86\u7a33\u5b9a\u4e22\u6389\u9752\u6625\uff0c\u4e3a\u4e86\u5e73\u6de1\u4e22\u6389\u68a6",
      "img": "http:\/\/iwen.wiki\/sxtstu\/blueberrypai\/indexImg\/youji_38.pngg"
    }
  ]
}

2) フィールド img を取得する必要があります。

"img": "http:\/\/iwen.wiki\/sxtstu\/blueberrypai\/indexImg\/youji_38.pngg"

次に、img フィールドを取得します。取得されるのは画像ではなく単なるリンクであるため、画像を表示するには次のタグを使用する必要があります:

<img src={item.img} alt=&#39;图片未显示&#39;/>

うーん、見た目は完璧です。上記のリンクはサーバー上で読み取って表示できますが、ローカル画像の場合:

"img": "@/assets/imgs/cloud/Directory.svg"

は読み取れないため、このアイデアは最終的に合格となりました。

仕方なく他の方法をネットで探したところ、以下の記事を発見しました。

「ES6 Reactコンポーネントのローカルイメージ参照問題」

この記事は、ざっくりとした内容です。つまり、上記の 2 つの方法、方法 1 と方法 2 は、画像があまりなく、画像パスをフロントエンドに直接読み込むという問題を解決できます。それでは、データベースから画像のパスを読み取る必要があり、require は変数を書き込めず、import from は変数を書き込めない場合、どうすればよいでしょうか?で、この記事を読んでやってみたのですが、わからなくて諦めました。

最後に、require to read を使用した記事があり、最終的に私の問題を解決しました。参考 2 をご覧ください。ここでは私のアイデアについて話します。

require() の入力は文字列のみであると前に言いませんでしたか?したがって、img フィールドを 2 つの部分に分割できます: ファイル名 画像名

例:

ファイル名: '@/assets/images/'

画像名: item.img (コレクション全体を調べたのでこれを書きました)

json の img フィールドを変更します:

"img": "logo.jpg"

最後に、これは文字列の結合と同等です: @/assets /images /logo.jpg

require('@/assets/images/logo.jpg')

これでは目標は達成されませんか?

このように書くと読めない場合は、次のように書いてください:

<img  src={require(&#39;@/assets/images/&#39;+ item.img).default} / alt="反応使用は必要ですか?" >

%20%E6%8E%A8%E5%A5%A8%E3%81%95%E3%82%8C%E3%82%8B%E5%AD%A6%E7%BF%92:%20">react ビデオ チュートリアル

"

以上が反応使用は必要ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。