react中使用本地图片

首先，需要进行引入图片

import blogbj from './blogbj.jpg';

然后，在render(){}中{}使用

<img src={blogbj} alt=""/>

图片作为背景图片插入页面

1.使用style行内样式

import blogbj from './blogbj.jpg';//引入图片

//定义样式
const blogbj={
  minHeight:"100vh",
  background:`url(${images.blogbj}) no-repeat bottom`,
  backgroundSize:"100%"
}
class Register extends Component{
    render(){
        return (
            <div className="pcHome">
               <div style={blogbj}></div>
            </div>
        );
    }
}

2.引入外部css样式
和传统的样式一样，通过className把样式赋给元素
css

.appbj{
  min-height:100vh;
  background:url(./images/blogbj.jpg) no-repeat bottom;
  background-size:100%;
}

render(){}

<div className="appbj"></div>

Ps:在这里，是通过webpack配置file-loader对图片进行处理的，有兴趣的可以去管理资源|webpack中文网了解

另:react获取webpack配置webpack.config.js

npm run eject