相对 HTML 图片参考 (LAMP)

Question

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 aiden aiden 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>

Answer 1

my relative image reference isn't working.

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

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

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

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

相对 HTML 图片参考 (LAMP)

Relative HTML Image Reference (LAMP)

html

image

relative-path

src