반응에 배경 이미지를 추가하는 방법

반응에 배경 이미지를 추가하는 방법: 먼저 ['../../../images/xxx.jpg'에서 배경 가져오기]와 같이 필요한 이미지 경로를 소개한 다음 배경 스타일을 정의합니다. as [width: " 100%"]; 마지막으로 페이지를 렌더링합니다.

이 문서의 환경:

• windows10, React16 버전

• Dell G3 컴퓨터

(동영상 공유 학습: react 동영상 튜토리얼)

반응 js에서 div 배경 이미지 설정 in project

기존 프로젝트에서는 CSS 파일에 스타일을 정의한 후 해당 클래스를 div에 추가하기만 하면 됩니다. 그러나 React.js, 특히 webpack으로 구축된 환경에서는 클래스가 그런 것 같습니다. 스타일은 직접 정의해야 하는데, 이런 반응 프로젝트에서는 클래스 속성을 정의하기 위해 카멜 케이스 className={Obj (an object)}를 사용해야 하고, style={(an object)를 사용해야 하기 때문에 잘 작동하지 않습니다. } 라벨의 스타일을 정의합니다.

그럼 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 튜토리얼

위 내용은 반응에 배경 이미지를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!