Comment introduire des images locales dans les pages de réaction

Deux manières d'introduire des images locales en React.

Méthode 1. Introduction d'images sans arrière-plan

(1) - Utiliser

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

directement dans le src à l'intérieur de la balise img (2) import

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

Méthode 2 : Importer des images en arrière-plan

(1) La méthode render() est définie comme un objet

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

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

(2) L'importation introduit

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

Recommandations associées : tuto réagir

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!