欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

如何在react页面中引入本地图片

程序员文章站 2022-03-09 14:17:13
...
如何在react页面中引入本地图片

在react中引入本地图片的两种方式。

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

(1)-直接在img标签内部src中使用

<img src={require('图片路径')} />

(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页面中引入本地图片的详细内容,更多请关注其它相关文章!

相关标签: react 本地图片