반응 페이지에 로컬 이미지를 도입하는 방법

리액트에서 로컬 이미지를 소개하는 방법은 두 가지입니다.

방법 1, 배경이 없는 이미지 도입 방법

(1) - img 태그 내부 src에서 직접 사용

<img src={require(&#39;图片路径&#39;)} />

(2) import import

import imgSrc from '图片路径'
<img src={imgSrc} />

방법 2, 배경 이미지를 도입

(1 ) render() 메소드는 객체로 정의됩니다

const bgGround {
    display: 'inline-block',
    height: '40px',
    width: '40px',
    background: `url(${require("图片路径")})`
}

// 在return中使用
<span style={bgGround}>xxxxx</span>

(2) 가져오기 소개

import imgUrl from '图片路径'
// render()中定义为对象
const bgGround = {
    display: 'inline-block',
    height: '40px',
    width: '40px',
    backgroundImage: 'url(' + imgUrl + ')'}
//在return中使用
<span style={bgGround}>xxxxx</span>

관련 권장 사항: react 튜토리얼

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