React中图片的相对路径引入和绝对路径引入
-
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编译后的文件的,因此推荐这种方式。
分类:
前端随笔
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· winform 绘制太阳,地球,月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾(3.3-3.9)