React에서 BackgroundImage 스타일링을 위해 정적 이미지를 올바르게 참조하는 방법은 무엇입니까?

React에서 BackgroundImage에 대한 정적 이미지에 액세스

개발자는 React 애플리케이션 내 인라인 backgroundImage 스타일에 대한 정적 이미지에 액세스하는 데 어려움을 겪을 수 있습니다. 다음의 일반적인 구문 접근 방식은 가져온 이미지를 참조하려고 시도합니다.

<code class="javascript">import Background from '../images/background_image.png';

const sectionStyle = {
  width: "100%",
  height: "400px",
  backgroundImage: "url(" + { Background } + ")"
};</code>

이 접근 방식은 태그를 backgroundImage 스타일에 적용하면 실패합니다. 주요 차이점은 backgroundImage 속성 내에서 중괄호를 잘못 사용했다는 것입니다.

이 문제를 해결하려면 올바른 구문에서 중괄호를 생략하고 Background가 사전 처리된 문자열인지 확인해야 합니다(아마도 세 번째 웹팩 및 이미지 파일 로더와 같은 파티 도구).

<code class="javascript">backgroundImage: "url(" + Background + ")"</code>

또는 개발자는 ES6 문자열 템플릿을 활용하여 동일한 결과를 얻을 수 있습니다.

<code class="javascript">backgroundImage: `url(${Background})`</code>

이러한 수정 사항을 구현함으로써 개발자는 성공적으로 React 애플리케이션 내에서 backgroundImage 스타일을 지정하기 위해 정적 이미지를 참조하세요.

위 내용은 React에서 BackgroundImage 스타일링을 위해 정적 이미지를 올바르게 참조하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!