React项目中<img>元素路径设置及嵌套路由下的路径问题解惑

这本质是浏览器对相对路径和绝对路径的解析逻辑差异，再结合React项目public文件夹的资源访问规则导致的，拆解来看：

• 先明确React public文件夹的资源规则 #

React项目里，public目录下的文件会直接部署到服务器的根目录（比如域名后的/），所以你存在public/icons/dashboard-sidebar-toggler.svg的图标，实际可访问的路径是[你的域名]/icons/dashboard-sidebar-toggler.svg。

• 相对路径./icons/xxx.svg为什么失效？ #

浏览器解析相对路径时，是基于当前页面的URL路径层级来定位资源的：

• 原来路由是/appeal_edit_page时，页面URL是[域名]/appeal_edit_page，浏览器会把当前路径当成一个“目录”，此时./icons/xxx.svg会被解析成[域名]/appeal_edit_page/icons/xxx.svg——但你的图标根本不在这个路径下，自然加载失败。

• 改成嵌套路由/dashboard/appeal_edit_page后，页面URL变成[域名]/dashboard/appeal_edit_page，相对路径会被解析为[域名]/dashboard/appeal_edit_page/icons/xxx.svg，还是找不到正确的资源位置。

• 绝对路径/icons/xxx.svg为什么正常？ #

以/开头的路径是根相对路径，浏览器会直接从服务器的根目录开始查找资源，也就是精准匹配到[域名]/icons/dashboard-sidebar-toggler.svg，正好对应public文件夹下的图标位置，所以能正常加载。

内容的提问来源于stack exchange，提问作者Fuaad