How to introduce local images into react pages

Two ways to introduce local images in react.

Method 1. Non-background image introduction method

(1)-Use

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

directly in the src inside the img tag (2) import

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

Method 2. Import pictures as backgrounds

(1) Define it as an object in the render() method

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

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

(2) Import introduction

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

Related recommendations: react tutorial

The above is the detailed content of How to introduce local images into react pages. For more information, please follow other related articles on the PHP Chinese website!