如何在react頁面中引入本地圖片

在react中引入本機圖片的兩種方式。

方式一、非背景圖片引入方式

（1）-直接在img標籤內部src中使用

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

（2）import導入

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

方式二、圖片作為背景引入

（1）render()方法內定義為物件

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

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

（2）import引入

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

相關推薦： react教程

以上是如何在react頁面中引入本地圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！