So fügen Sie lokale Bilder in Reaktionsseiten ein

Zwei Möglichkeiten, lokale Bilder in React einzuführen.

Methode eins, Einführungsmethode für Bilder ohne Hintergrund

(1) – Direkt im src im IMG-Tag verwenden

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

(2) import import

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

Methode zwei, Bild als Hintergrund einführen

(1 ) render() Die Methode ist als Objekt definiert

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

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

(2) Importeinführung

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

Verwandte Empfehlungen: React Tutorial

Das obige ist der detaillierte Inhalt vonSo fügen Sie lokale Bilder in Reaktionsseiten ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!