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

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

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

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

  2. 使用JS的import引入,如

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

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

    <img src={GoogleImage}>
    

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

posted @   ruoyxue  阅读(917)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· winform 绘制太阳,地球,月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示