React图片引入的两种方式

一、使用到图片标签的src属性上时

1.分离引入方式

在文件头部引入：

import logo from '../img/logo.svg';

在reder函数中使用

<img src={logo}  alt="图标"/>

2.通过require懒加载引入

在reder函数中使用

<img src={require("../img/logo2.jpg")} alt="图标"/>

二、作为背景图片使用时

1.分离引入方式

在文件头部引入：

import logo from '../img/logo.svg';

在reder函数中使用：

let bgc={"height":"400PX","width":"400px","backgroundImage":"URL(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=318050910,1598130082&fm=26&gp=0.jpg)"}

<div style={bgc}>hello</div>

ps: 背景图片在使用时要加上宽高才能显示

2.通过require懒加载引入

在reder函数中使用

<div style={{backgroundImage:`URL(${require("../img/logo2.jpg")})`,width:"200px",height:"200px"}}>懒加载背景</div>