NGINX 服务器上未加载背景图像答案

【问题标题】：Background Images Not Loading on NGINX ServerNGINX 服务器上未加载背景图像
【发布时间】：2018-04-07 08:53:44
【问题描述】：

在 Ubuntu 16.04 上使用 Nginx，我想创建一个网站，将所有资源保存在主机服务器上。

我遇到的问题是当我尝试使用我的背景图片时。如果我将其设置为使用

从网站拉取

url(“example.com/example_image.jpg”)

它工作得很好，但是因为我想让它从我自己的本地服务器中提取图像，如果我尝试做类似的事情

url(“/images/example_image.jpg”)

它不起作用。

我尝试了一些不同的方法，但我实际上只是在尝试边做边学，但似乎并不能正常工作。感谢您的帮助。

编辑 #1：这是我的网站代码：

<!DOCTYPE html>
<html>
<title>INDEX.HTML</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css? 
family=Raleway">
<style>
body,h1 {font-family: "Raleway", sans-serif}
body, html {height: 100%}
.bgimg {
    background-image: <img src="../example_image.jpg" alt="EXAMPLE">;
    min-height: 100%;
    background-position: center;
    background-size: cover;
}
</style>
<body>

<div class="bgimg w3-display-container w3-animate-opacity w3-text-black">
  <div class="w3-display-topleft w3-padding-large w3-xlarge">
    LOGO
  </div>
  <div class="w3-display-middle">
    <h1 class="w3-jumbo w3-animate-top">TITLE TEXT</h1>
    <hr class="w3-border-grey" style="margin:auto;width:40%">
    <p class="w3-xlarge w3-center">SUBHEADER</p>
  </div>
</div>

</body>
</html>

【问题讨论】：

我认为该文件位于/var/www/html/images/example_image.jpg。
您能提供您的实际 HTML / CSS（和文件路径）吗？看看你可以简化多少才能仍然显示问题。
否，该文件当前位于 /data/images 中。 Root 当前也设置为 /data。
回家后，我将添加实际代码。

标签： html css ubuntu nginx server

【解决方案1】：

其实再看一遍，可能是和NGINX权限有关。

找到正在运行应用程序的用户。通常是www-data。有两种方法：

检查 /usr/local/nginx/nginx.conf 是否有包含 user NAME 的行，其中 NAME ，或在终端中运行：

ps aux | grep nginx

ps 获取正在运行的进程信息，grep 在输出中搜索包含字符串的匹配行，特别是在我们的例子中包含nginx 的行。

现在，使用chown 更改静态资源的文件所有权。对于位于 /home/nick/website-folder/ 的 Web 服务器文件夹：

sudo chown -R NAME:NAME /home/nick/website-folder/

其中 NAME 是之前的用户名，例如，对于用户名 www-data，命令是 sudo chown -R www-data:www-data /home/nick/website-folder/

这为运行 NGINX 服务器应用程序的 Linux 用户提供了访问网站文件夹中资源的权限。如果您想加强安全性，您可以将此范围进一步缩小到 ... website-folder/images。先尝试整个目录。

【讨论】：

好吧，我运行了 ps aux | grea nginx 命令，我看到一大堆 www-data 工作进程，然后是根目录下的 1 个主进程。我没有看到您说要查看的 nginx.conf 文件，但是我拥有的文件除了 server_name 之外什么都没有。我按照您所说的更改了 www-data 的权限，但仍然没有骰子。

【解决方案2】：

看起来您的文件路径不是相对的。

通常在 Ubuntu 和 Linux 上，以 / 开头的路径是根目录，也就是说，可以将 / 视为 Windows 中的 C:/。这意味着这是一个非常顶级的目录。

如果你想有一个相对于当前文件夹的路径，在 Linux 中用./ 表示，其中的点代表工作目录。

例如，如果我在/home/nick/docs/ 中有一个脚本并且它有url('./images/photo.jpg')，那么它指的是位于/home/nick/docs/images/photo.jpg 的图像。

我猜你的脚本在一个文件夹中，该文件夹有一个名为images 的子目录。在这种情况下，对于名为photo.jpg 的图像，您需要url('./images/photo.jpg')。

另一个文件路径符号是../。这代表当前目录之上的一个目录，即它的父目录。如果我们在与上一个示例相同的脚本中包含url('../images/photo.jpg')，则路径现在将解析为/home/nick/images/photo.jpg。

进一步阅读您的代码，我注意到了这一点：

.bgimg {
  background-image: <img src="../example_image.jpg" alt="EXAMPLE">;
...

您似乎尝试在 CSS 中内联 HTML img 标签 - 您想要 CSS url 属性值：

.bgimg {
  background-image: url('./images/photo.jpg');
}

对于使用url('./images/photo.jpg')，您的文件夹的目录结构应该是：

root-folder/
| images/
  | photo.jpg
| index.html
| w3.css

【讨论】：

我尝试使用“./images/example_image.jpg”，也只使用“./example_image.jpg”。这些都不起作用。然后我尝试使用“../example_image.jpg”，但也没有用。我觉得奇怪的是，我的“样式表”与位于根目录中的 w3.css 一起正常工作。为什么背景图片不能正常工作？
刚改成url('./images/example_image.jpg');那也没有用。我得到的只是白色背景。我的 CSS 看起来和所有其他代码一样好，但只是我的图像没有填充。 ://
也许我还应该提到，我将 example_image.jpg 的副本放在我认为会从中提取的每个可能的目录中，但它们都不起作用。
确保您的目录结构与我的编辑中概述的一致
刚刚按照您的建议更改了目录。我的根目录为 /data。在那个文件夹中，我们有 /images、w3.css 和 index.html。在 /images 我们有 example_image.jpg。重启 nginx 还是一个空白页。

【解决方案3】：

我终于让它工作了。更改权限后，我回顾了 W3Schools 的 CSS 指南并将我的代码更改为：

.bgimg {
     background-image: url(“images/example_art.jpg”);

我不知道为什么删除文件路径开头的 / 会改变它，但我感谢您的帮助。

【讨论】：