相对 HTML 图像参考 (LAMP)答案

【问题标题】：Relative HTML Image Reference (LAMP)相对 HTML 图像参考 (LAMP)
【发布时间】：2015-05-16 12:16:07
【问题描述】：

对 Web 开发真的很陌生，但我不知道为什么我的相对图像参考不起作用。我的 index.php 在 DocumentRoot [/var/www/vhosts/project0/html/] 中有一个单独的文件夹，我在其中放置了我的图像 [/var/www/vhosts/project0/images/]。我查看了权限，它们似乎没问题；请参阅下面 [/var/www/vhosts/project0/] 处的 ls -l 输出：

drwxr-xr-x 2 艾登艾登 4096 年 3 月 12 日 18:48 html
drwxr-xr-x 2 艾登艾登 4096 年 2 月 14 日 12:12 图片

我的 HTML 如下：

<!DOCTYPE html>

<html>
  <head>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <title>My Lecture Reader</title>
  </head>
  <body>
    <h1>CSCI S-75</h1>
    <ul>
      <img src="P001.jpg"/> <br> <!-- Works -->
      <img src="../images/P001.jpg"/> <br> <!-- Doesn't Work -->
    </ul>
  </body>
</html>

注意：我已将 P001.jpg 从 images/ 复制到 html/ 以进行调试。

我在 VirtualBox 上运行 Xbuntu，Apache2 作为 Web 服务器。

如果您能提供帮助，或者为我指明正确的方向，那就太好了。

干杯，

艾登

额外细节：

project0.conf 提取：

<VirtualHost *:80>
    ServerName project0

    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/vhosts/project0/html/
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

【问题讨论】：

这可能是文件夹权限的问题。或者使用已交付文档的那部分的 http 服务配置。您必须为您的问题添加更多详细信息。
一般提示：通常将图像文件夹放入索引文档所在的基本文件夹。
同意@arkascha，通常你把index.html放在你网站的最外层文件夹中。
“不工作”从来都不是调试的好起点。真正的问题是什么？你得到什么错误？请查阅您的浏览器开发控制台、其中的网络选项卡以及您的 http 服务器错误日志文件。您需要找出实际调用的 url 以及 http 服务器对该请求执行的操作。
您在文档根目录之外有图像文件夹（如上所述） - 所以这不起作用（这是“一般提示”）。由于它位于文档根目录之外，因此永远无法解析相对 client-side 路径。您直接在客户端 HTML 中提供的所有内容都必须位于文档根目录中。

标签： html image relative-path src

【解决方案1】：

我的相对图像参考不起作用。

您在文档根目录之外有图像文件夹 - 所以这不起作用。由于它位于文档根目录之外，因此您的相对客户端 URL 永远无法解析（您实际上是在尝试“高于”http://example.com/）。您直接在客户端 HTML 中提供的所有内容都必须位于文档根目录中。（如果您可以从客户端浏览器直接访问 DocumentRoot 上方的文件，那么您将面临巨大的安全漏洞！）

但是，您的服务器端相对文件系统路径（不是 URL）解析正常，因此您可以访问您的 XML 文件。请注意，在大多数共享服务器环境中，您的服务器端脚本通常可以访问“文档根目录”上方的 1 个目录。这是一个“隐藏”服务器端文件的好地方，因为它们不能从浏览器（客户端）直接访问。

您的“图像”目录（您想直接从 HTML 访问）应该放在 DocumentRoot 中，例如。 /var/www/vhosts/project0/html/images。然后，您可以使用文档根目录中的 index.php 文档中的根相对路径（以斜杠开头）访问您的图像，因此：

<img src="/images/P001.jpg">

【讨论】：