相对链接 <img> 标签 src答案

【问题标题】：Relative linking <img> tag src相对链接 <img> 标签 src
【发布时间】：2017-06-23 01:49:16
【问题描述】：

我有一个位于localhost/about/ 的HTML 页面和一个位于localhost/images. 的图像在我的HTML 中，我有一个像这样的img 标记：

img src="../images/logo.png"

当我在浏览器中查看此页面时，徽标图像会显示一秒钟，然后出现 alt 文本。查看图片信息，src中的页面更改为"localhost/about/images/logo.png".

编辑：我正在显示这样的图像。

 <!-- header-left start -->
 <!-- ================ -->
 <div class="header-left">
     <div class="logo">
         <a href="../"><img id="logo" src="../images/logo.png" alt="Alt Text" width="196" height="60"></a>
     </div>
 </div>
 <!-- header-left end -->

文件夹结构：

我对这个相对路径源做错了什么吗？

【问题讨论】：

如果可能的话，请分享代码..和文件夹设置路径..这是在开发环境中还是只是静态html？
不是这个相对路径号。可能还有其他东西弄乱了 documentURI。这一秒的事情真的很奇怪。您是否以某种方式重定向？你有任何脚本在这个页面上运行吗？尝试禁用所有并重新启用，直到找到导致此问题的原因。如果在没有脚本的情况下仍然出现，请尝试禁用所有浏览器的扩展。如果仍然出现，请检查您的服务器配置。
试试 ~/images/logo.png
@YogeshSharma — 你有理由相信 OP 正在使用一些服务器端处理来解析 ~ 字符吗？
@YogeshSharma — 不。在 URL 中，~ 只是一个可以出现在路径中的字符。它不会“添加主机名”（除非涉及一些服务器端进程，我认为它在 ASP.NET 中可能具有特殊含义）

标签： html image src

【解决方案1】：

您可能需要检查document javascript 对象的baseURI 属性。 As defined by MDN:

当浏览器需要获取绝对 URL 时，例如在处理 HTML 元素的 src 属性或 XML xlink:href 属性时，使用基本 URL 来解析相对 URL。

通过在 Javascript 控制台中输入以下内容来检查基本 URL 值：

console.log(document.baseURI);

【讨论】：