XAMPP环境下如何将本地图片绝对路径转为<img>标签src可识别路径

核心逻辑：你使用XAMPP启动的Apache Web服务会默认将C:/xampp/htdocs/作为站点根目录，浏览器是通过HTTP协议访问服务端分发的资源，无法直接读取本地磁盘的绝对路径，你只需要将本地路径映射为Web服务可识别的路径即可，共有三种常用写法：

• 【最推荐：站点根相对路径】
  直接移除本地路径中与站点根目录重合的C:/xampp/htdocs前缀，最终路径为/images/shop/2319556577.jpg，示例代码：

  <img src="/images/shop/2319556577.jpg" alt="商品图">
  

  该写法不受当前HTML文件所在站点子目录层级影响，适配性最强。
• 【当前页相对路径】
  根据你当前HTML文件的存储位置调整路径层级：
  • 如果HTML文件放在C:/xampp/htdocs/根目录下，直接写images/shop/2319556577.jpg即可
  • 如果HTML文件放在C:/xampp/htdocs/shop/这类子目录下，可写为../images/shop/2319556577.jpg，../代表向上退回一层目录
• 【本地测试专属：HTTP绝对路径】
  本地测试时可直接带服务地址写全路径，XAMPP默认端口为80时路径为http://localhost/images/shop/2319556577.jpg，如果修改过端口比如改为8080，路径调整为http://localhost:8080/images/shop/2319556577.jpg。该写法仅适合本地测试使用，上线部署时需要替换为你的正式域名。

注意事项 #

必须通过http://localhost/xxx的域名形式访问你的HTML页面，不能直接双击本地HTML文件用file://协议打开，该协议下依然会走本地文件读取规则，图片无法正常加载。

内容的提问来源于stack exchange，提问作者collin ter steege