React中图片的相对路径引入和绝对路径引入

2023-06-02,,

    React中当在JSX中的img标签中引入时使用相对路径引入,地址是基于index.html的而不是当前jsx文件的,如

    <img src="./src/assets/images/google.png">

    此种方式的src是固定的字符串,当进行webpack打包时可能会出现路径问题,不推荐

    使用JS的import引入,如

    import GoogleImage from '../../assets/images/google.png'

    这里的路径是基于当前jsx文件的,此时可以用

    <img src={GoogleImage}>

    来导入图片。这里导入的GoogleImage是动态导入的,具有动态路径,且是基于Webpack编译后的文件的,因此推荐这种方式。

React中图片的相对路径引入和绝对路径引入的相关教程结束。

《React中图片的相对路径引入和绝对路径引入.doc》

下载本文的Word格式文档,以方便收藏与打印。