React 加载本地图片

最近在用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>
            );
    }

以上两种方法都可以把本地图片给加载出来。可供大家选择。亲测有效的哈。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容