在react中引入本地图片的两种方式。
方式一、非背景图片引入方式
（1）-直接在img标签内部src中使用
@@##@@
（2）import导入
import imgSrc from '图片路径' @@##@@
方式二、图片作为背景引入
效果描述： 简单好用的立体式左右滚动banner焦点图效果 源代码没有任何图片，且CSS较为冗余，懒人站长已经做过优化，方便懒人们使用 使用方法： 1、将CSS引入到你的页面中，保证命名不冲突 2、将index.html中代码部分拷贝到你需要的地方即可
98
（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中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
291
收藏
