Question

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

Answer 1

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

在Ubuntu和Linux上，一般以/开头的路径是根目录，即，在Windows中C:/时考虑./。这意味着这是一个非常顶级的目录。

如果您想拥有一个相对于当前文件夹的路径，那么在/home/nick/docs/中用Linux表示，其中点代表工作目录。

例如，如果我在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">; ...。

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

url

这里看起来你试图在CSS中内联HTML img标签 - 你想要CSS .bgimg { background-image: url('./images/photo.jpg'); }属性值：

url('./images/photo.jpg')

使用root-folder/ | images/ | photo.jpg | index.html | w3.css时，文件夹的目录结构应为：

{this.props.children}

Answer 2

实际上，再看看，也许这与NGINX权限有关。

找到正在运行该应用程序的用户。通常是#NAME?。有两种方式：

检查www-data以查找包含/usr/local/nginx/nginx.conf的行，其中包含NAME，或在终端中运行此行：

user NAME

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

现在，使用nginx为静态资源更改文件所有权。对于位于chown的

的Web服务器文件夹

/home/nick/website-folder/

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

这使运行NGINX服务器应用程序的Linux用户具有访问网站文件夹中资源的权限。如果要加强安全性，可以将此范围进一步缩小到sudo chown -R www-data:www-data /home/nick/website-folder/。首先尝试整个目录。

Answer 3

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

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

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

NGINX Server上未加载背景图像

3 个答案: