Ubuntu 16.04下NGINX服务器本地背景图片无法加载问题求助

嘿，我来帮你排查这个本地图片加载的问题——这种绝对路径的坑我当初刚学Nginx的时候也踩过几次，咱们一步步来解决：

第一步：确认本地图片的实际路径是否匹配 #

你用的url("/images/example_image.jpg")是绝对路径，它对应的服务器上的位置是你的Nginx网站根目录下的images文件夹。比如默认情况下Ubuntu 16.04的Nginx网站根目录是/var/www/html，那你的图片必须存在于/var/www/html/images/example_image.jpg。

你可以用命令验证文件是否存在：

ls /var/www/html/images/example_image.jpg

如果提示"No such file or directory"，要么是你放错了文件夹，要么是文件名/路径打错了（注意Linux是区分大小写的，Example.jpg和example.jpg是两个不同的文件）。

第二步：检查文件和文件夹的权限 #

Nginx是用www-data用户运行的，所以必须确保这个用户能读取你的图片文件和images文件夹。

1. 查看当前权限：

ls -l /var/www/html/images/example_image.jpg
ls -ld /var/www/html/images/

输出里的权限列（比如-rw-r--r--）要保证其他用户有读权限（最后三个字符里有r）。

2. 如果权限不对，修复文件权限：

# 给图片文件设置可读权限
chmod 644 /var/www/html/images/example_image.jpg
# 给images文件夹设置可访问+可读权限
chmod 755 /var/www/html/images/
# 必要时把文件夹和文件的所有者改成www-data
chown www-data:www-data /var/www/html/images/ -R

第三步：验证Nginx配置是否正确映射静态资源 #

打开你的Nginx站点配置文件（通常在/etc/nginx/sites-available/目录下，比如default文件），检查以下几点：

1. 确保root指令指向了正确的网站根目录，比如：

server {
    listen 80;
    server_name your_domain_or_ip;

    # 这里必须是你的网站文件所在的根目录
    root /var/www/html;
    index index.html index.htm;

    # 确保静态资源路径被正确处理
    location /images/ {
        expires 30d; # 可选，设置缓存
        add_header Cache-Control "public, no-transform";
    }

    location / {
        try_files $uri $uri/ =404;
    }
}

2. 检查配置文件有没有语法错误：

nginx -t

如果提示"test is successful"，就重启Nginx生效：

sudo systemctl restart nginx

第四步：排除浏览器缓存和验证请求状态 #

有时候浏览器会缓存旧的错误响应，导致新的图片加载不出来：

• 按Ctrl+Shift+R强制刷新页面
• 打开浏览器开发者工具（F12），切换到Network标签，勾选"Disable cache"，然后重新加载页面，查看图片请求的状态码：
  • 如果是404 Not Found：回到第一步检查路径
  • 如果是403 Forbidden：回到第二步检查权限
  • 如果是200 OK但图片还是不显示：可能是图片本身损坏，或者CSS里的路径写法有问题（比如多打了斜杠）

最后再确认一个细节 #

如果你的CSS文件不是放在网站根目录，比如在/css/style.css，但你用的是绝对路径/images/...，这是没问题的——绝对路径是相对于网站根目录的，和CSS文件的位置无关，所以不用改成相对路径。

内容的提问来源于stack exchange，提问作者ztaylor