Reactで画像をインポートする方法

React で画像をインポートする方法: 1. import メソッドを使用してインポートします。コードは [import logo from './asset/logo.jpg']; 2. require メソッドを使用します。コードは [

このチュートリアルの動作環境: Windows10、react16、この記事

React に画像をインポートする方法:

1. インポート メソッド経由 (静的画像の挿入に適しています):

import React from 'react'
import logo from './asset/logo.jpg'
export default class Login extends React.Component {
    render() {
        return (<>
            <img src={logo} alt="logo" />
        </>)
    }
}

2. require メソッドを使用します (このメソッドを使用して動的な画像を挿入できます):

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

require には画像アドレスを純粋に表す変数を含めることはできませんが、このメソッドは次の場合に使用できます。変数と文字列を連結します。

3. 画像アドレス (ネイティブのものと同じ) を直接使用して、CSS で画像を参照できます。

関連する無料学習の推奨事項: JavaScript (ビデオ)

以上がReactで画像をインポートする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。