今日开发问题:React无法插入图片的解决

今日开发工作中在给页面插入图片时遇到一个问题,标签插入图片失败,因相对路径较复杂,一开始以为是路径出错,纠结于../的数量问题,尝试了很多次也无果。

之后干脆直接将素材图片放入jsx同一目录下,但仍无法加载。

后发现问题:React加载图片但时候不能直接使用html的方法插入,可以用以下两种方法插入图片:

  1. 使用导入的方法:
    在头部先引入import imgURL from '../../../src/img/test.jpg';
    接着在render方法中调用:
render() {
        return (
            <div className = "box" >
                <img src={imgURL } />  
            </div>
            );
    }

2.直接在render方法中引入:

render() {
        return (
            <div className = "box" >
                <img src={require('../../../src/img/aboutme-background.jpg')} />  
            </div>
            );
    }

Over~

你可能感兴趣的:(React)