[javascript] 리 액트 인라인 스타일로 backgroundImage 설정

JAVASCRIPT / 글쓴이

backgroundImageReact 내 인라인 속성 내에서 사용하기 위해 정적 이미지에 액세스하려고합니다 . 불행히도, 나는 이것을하는 방법에 대해 말랐다.

일반적으로 방금 다음과 같이 생각했습니다.

import Background from '../images/background_image.png';

var sectionStyle = {
  width: "100%",
  height: "400px",
  backgroundImage: "url(" + { Background } + ")"
};

class Section extends Component {
  render() {
    return (
      <section style={ sectionStyle }>
      </section>
    );
  }
}

이것은 작동 <img>태그입니다. 누군가 둘 사이의 차이점을 설명 할 수 있습니까?

예:

<img src={ Background } /> 잘 작동합니다.

감사합니다!

답변

backgroundImage 속성 안의 중괄호가 잘못되었습니다.

이미지 파일 로더와 함께 webpack을 사용하고 있으므로 Background는 이미 문자열이어야합니다.
backgroundImage: "url(" + Background + ")"

ES6 문자열 템플릿을 아래와 같이 사용하여 동일한 효과를 얻을 수도 있습니다.

backgroundImage: `url(${Background})`

답변

ES5를 사용하는 경우-

backgroundImage: "url(" + Background + ")"

ES6를 사용하는 경우-

backgroundImage: `url(${Background})`

backgroundImage 속성 작업에 값을 추가하는 동안 불필요한 중괄호를 기본적으로 제거하면 작동합니다.

답변

이미지를 전체 화면으로 설정하는 인라인 스타일 :

style={{  
  backgroundImage: "url(" + "https://images.pexels.com/photos/34153/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" + ")",
  backgroundPosition: 'center',
  backgroundSize: 'cover',
  backgroundRepeat: 'no-repeat'
}}

답변

require()기능 을 사용하여 이미지를 컴포넌트로 가져올 수도 있습니다.

<div style={{ backgroundImage: `url(require("images/img.svg"))` }}>

두 개의 중괄호 세트에 유의하십시오 . 첫 번째 세트는 반응 모드로 들어가기위한 것이고 두 번째 세트는 객체를 나타 내기위한 것입니다.

답변

다음 backgroundImage과 같은 속성 대신 템플릿 리터럴 (back-tick :`…`로 묶음)을 사용할 수 있습니다 .

backgroundImage: `url(${Background})`

답변

이 시도:

style={{ backgroundImage: `url(require("path/image.ext"))` }}

답변

나를 위해 일한 것은 다음과 같습니다.

style={{ backgroundImage: `url(${require("./resources/img/banners/3.jpg")})` }}