Reactプロジェクトで画像を導入するいくつかの方法

imgタグは画像を導入します

reactは実際にはjsリーダー関数を介してページをレンダリングするため、src="path"を直接記述して画像をインポートすることはできません。

モジュールをインポートするのと同じようにイメージをインポートできます

'./../../../../asset/img/user.png' から img をインポートします。

次のように紹介する必要がある

<img src={require('../images/picture.png')} alt="ラベル"/>

背景画像紹介

1 1つ目は、通常の方法で新しいCSSファイルを作成し、CSS構文を直接記述することです。

.img {
   背景: url('../images/picture.png') 0 0 繰り返しなし;
}

2 2番目の方法は、変数を介してReactコンポーネントに導入し、変数をimgタグに直接割り当てることです。

// 画像ファイルをインポート import bg from '../images/bg.png'
// 文字列連結によってスタイルオブジェクトを定義する const imgStyle = {
  幅: '100%'、
  高さ: '500px'、
  背景画像: 'url(' + bg + ')',
  背景位置: 'center 0'、
  背景サイズ: '2045px 472px',
  背景繰り返し: '繰り返しなし'
}
クラス Home は Component を拡張します {
 コンストラクタ（）{
  スーパー（小道具）
 }
 与える（） {
  //最後に変数をタグに直接割り当てます <div style="imgStyle">
   ...
  </div>
 }
}

必要とする

また、vue の場合と同様に、相対パスを require でラップし、src に直接割り当てることもできます。

<img width="100" height="100" src={require('./../../../../asset/img/user.png')} alt="" className={'user-img'}/>

**注:** ファイルローダーライブラリのバージョンが異なるため、若干の違いがあるため、ここで問題が発生します。ファイルローダーライブラリの上位バージョンでは、esModule はデフォルトで true に設定され、require は文字列パスではなく ES モジュールを返します。この ES モジュールのデフォルト属性は文字列パスなので、次のように記述する必要があります。

<img width="100" height="100" src={require('./../../../../asset/img/user.png').default} alt="" className={'user-img'}/>

ファイルローダーのバージョンについては心配する必要はありません。require を直接使用してもイメージを正常に表示できない場合は、require の後に .default を追加できます。

これで、React プロジェクトに画像を導入するいくつかの方法について説明したこの記事は終了です。React に画像を導入することに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: