在create-react-app搭建的react项目中
一、插入图片
1、jsx中直接写
<img src={require('../../../static/login/bg.jpg')} style={{width:"50px",height:"50px"}} alt=""/>
2、import导入
import bg from '../../../static/login/bg.jpg'
<img src={bg} style={{width:"50px",height:"50px"}} alt=""/>
二、背景图片
1、行内样式
<div style={{width:"100%",height:"100%",backgroundImage:`url(${require('./bg.jpg')})`,backgroundSize:"cover"}}>
</div>
2、外部声明
<div style={styleList.wrap}></div>
const styleList = {
wrap: {
display: "flex",
width: "100%",
height: "100%",
backgroundImage: `url(${require('./bg.jpg')})`,
backgroundSize:"cover"
},
}
3、使用.css文件
<div className="wrap"></div>
.wrap{
height: 100%
;
width: 100%
;
background: url('../../static/login/bg.jpg');
background-size: cover
;
display: flex
;
}
三、视频资源
引入视频资源时，跟图片一样，必须要写成 require形式，否则无效
四、原因
暂未总结！！！（自己摸索比较慢，写博客主要是记录学习中遇到的问题和解决方法，具体深入原因待后续了解清楚了会持续更新）
注：参考这篇博客
https://blog.csdn.net/zyx1303031629/article/details/80536969
//方式一：import tsIcon from '../images/typescript.jpeg';
//方式二：const tsIcon = require('../images/typescript.jpeg');
//使用方式一：<img src={tsIcon} alt="" />
//使用方式二：<div style={{background: `url(${tsIcon}) no-repeat`}}></div>
//使用方式三：const styles = { test: { background: `url(${tsIcon}) no-repeat center` }}render() { return ( <div style={styles.test}></div> )}
