一、使用到图片标签的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>