Reactで背景画像を追加する方法

React に背景画像を追加する方法: まず、[import Background from '../../../images/xxx.jpg'] など、必要な画像パスを導入し、次に[width: "100%"] などの背景スタイル; 最後にページをレンダリングするだけです。

#この記事の環境：

#windows10、react16 バージョン
Dell G3 コンピューター
(学習ビデオ共有:

react ビデオ チュートリアル

)react js プロジェクトで div 背景画像を設定します

従来のプロジェクトでは、css ファイルでスタイルを定義し、対応するクラスを div に追加するだけでしたが、react.js、特に webpack で構築された環境では、その必要はないようですクラススタイルを直接定義します。このような反応プロジェクトでは、クラス属性を定義するためにキャメルケース className={Obj (オブジェクト)} を使用し、定義するために style={(オブジェクト)} を使用する必要があるため、これは非常にうまく機能します。タグのスタイル。

それでは、背景画像を div に追加するにはどうすればよいでしょうか?

は次のとおりです:

//首先引入需要的图片路径
import Background from '../../../images/login.jpg';

//定义背景样式

var sectionStyle = {
  width: "100%",
  height: "400px",
// makesure here is String确保这里是一个字符串，以下是es6写法
  backgroundImage: `url(${Background})` 
};

export default class Login extends Component{
//渲染页面
render(){
        return (
    <div style={sectionStyle}></div>
        )

    }

}

コードのスクリーンショット:

##関連する推奨事項: jsチュートリアル

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