ローカル画像を反応ページに導入する方法

React でローカル イメージを導入する 2 つの方法。

方法1.非背景画像導入方法

(1)-imgタグ内のsrc内で直接

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

を使用する(2)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>

関連する推奨事項:

反応チュートリアル

以上がローカル画像を反応ページに導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。