最近在用create-react-app 脚手架搭建自己的个人博客,以为对React不熟悉,所以在写的时候遇到很多坑,学习一们新语言就是从一个坑爬进另一个坑,其中在添加背景图片的时候需要记载本地图片,不能用html加载图片的方法,以为ES6不支持<img src="../images/photo.png"/>
这样的写法;这样写加载不出来,所以在经过百度之后总结了两种方法:
1.向导入类一样的方法把图片的位置直接导进去:
import imgURL from '../../../src/img/aboutme-background.jpg';
在render的方法中调用:
render() {
return (
<div className = "about-backgroundImage" >
<img src={imgURL } />
</div>
);
}
2.就是像加载网页中的图片一样来加载本地图片,直接在render方法中写入
render() {
return (
<div className = "about-backgroundImage" >
<img src={require('../../../src/img/aboutme-background.jpg')} />
</div>
);
}
以上两种方法都可以把本地图片给加载出来。可供大家选择。亲测有效的哈。