react怎麼加入背景圖片

react新增背景圖片的方法：首先引入我們需要的圖片路徑，如【import Background from '../../../images/xxx.jpg'】；然後定義背景樣式，如【width: "100%"】；最後渲染頁面即可。

本文環境：

• windows10、react16版本

• Dell G3電腦

（學習影片分享：react影片教學）

在react js 專案中設定div 背景圖片

#在傳統的專案中我們只需要在css檔案中定義樣式，然後為div添加對應的class即可，但是在react.js中，尤其是在用webpack 搭建的環境中，似乎直接寫定義class樣式就不太管用了，因為這樣的react項目，定義class屬性需要用駝峰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中文網其他相關文章！