PHP项目本地图片无法加载问题求助（Docker+Nginx环境）

尝试将本地目录中的图片加载到PHP文件中，但图片始终无法显示。先后使用传统HTML标签和PHP动态输出两种方式加载images/logoDarkBlue.png，均未成功，相关代码及项目信息如下：

代码片段 #

<nav class="nav-bar">
  <img class="logo" src="images/logoDarkBlue.png" alt="img">
  
  <?php 
    echo "<img class='logo' src='images/logoDarkBlue.png' alt='img'>"; 
  ?>

  <form>
    <input type="text" class="nav-search" placeholder="Search">
  </form>
  <div class="dropdown">
    <button onclick="myFunction()" class="log-in">
      <i class="fa-regular fa-user"></i> &nbsp;<i class="fa-solid fa-angle-down"></i>
    </button>
    <div id="myDropdown" class="dropdown-content">
      <a href="#"><i class="fa-solid fa-circle-info"></i> &nbsp;Terms & Policies</a>
      <a href="#"><i class="fa-regular fa-circle-question"></i> &nbsp;Log In / Sign Up</a>
    </div>
  </div>
</nav>

完整代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- EXTERNAL CSS -->
  <!-- <link rel="stylesheet" href="index.css"> -->
  <style>
    <?php include "css/index.css" ?>
  </style>

  <!-- EXTERNAL SCRIPTS -->
  <script src="https://kit.fontawesome.com/....." crossorigin="anonymous"></script>

  <title>Title</title>
</head>

<body>
  <nav class="nav-bar">
    <img class="logo" src="images/logoDarkBlue.png" alt="img">
    
    <?php 
      echo "<img class='logo' src='images/logoDarkBlue.png' alt='img'>"; 
    ?>

    <form>
      <input type="text" class="nav-search" placeholder="Search">
    </form>
    <div class="dropdown">
      <button onclick="myFunction()" class="log-in">
        <i class="fa-regular fa-user"></i> &nbsp;<i class="fa-solid fa-angle-down"></i>
      </button>
      <div id="myDropdown" class="dropdown-content">
        <a href="#"><i class="fa-solid fa-circle-info"></i> &nbsp;Terms & Policies</a>
        <a href="#"><i class="fa-regular fa-circle-question"></i> &nbsp;Log In / Sign Up</a>
      </div>
    </div>
  </nav>

  <script>
    function myFunction() {
      document.getElementById("myDropdown").classList.toggle("show");
    }

    window.onclick = function (event) {
      if (!event.target.matches('.log-in')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    }
  </script>

</body>

</html>

路径信息 #

• Web服务器根目录：C:\Users\sat\OneDrive\Documents\GitHub\Project\DiscussIt\app\public
• 图片文件夹：C:\Users\sat\OneDrive\Documents\GitHub\Project\DiscussIt\app\public\images

Nginx配置 #

server{
  listen 80;
  server_name localhost;
  root /app/public;
  index index.php;

  location ~ \.php$ {
    fastcgi_pass app:9000;
    fastcgi_index index.php;
    fastcgi_param REQUEST_METHOD $request_method;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    include fastcgi_params;
  }
}

docker-compose.yml文件 #

version: "3.9"
services:
  webserver:
    image: nginx:latest
    ports:
      - "80:80"
    volumes:
      - ./nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf
  app:
    build:
      context: .
      dockerfile: ./php/Dockerfile
    volumes:
      - ./app:/app
  postgres:
    image: postgres:latest
    restart: always
    environment:
      POSTGRES_DB: "test"
      POSTGRES_USER: "testUser"
      POSTGRES_PASSWORD: "password"
    ports:
      - "5432:5432"
    expose:
      - "5432"
    volumes:
      - data:/var/lib/postgresql/data
  pg-admin:
    image: dpage/pgadmin4:latest
    environment:
      - PGADMIN_DEFAULT_EMAIL=test@gmail.com
      - PGADMIN_DEFAULT_PASSWORD=admin
      - PGADMIN_LISTEN_PORT=5050
    ports:
      - "5050:5050"
volumes:
  data:

Dockerfile #

FROM php:8.1-fpm-alpine

RUN set -ex \
  && apk --no-cache add \
    postgresql-dev

RUN docker-php-ext-install pdo pdo_pgsql
RUN docker-php-ext-install pdo pgsql

解决方案 #

1. 补充Nginx静态资源路由
   当前Nginx配置仅处理.php请求，未配置静态资源的路由规则，导致图片无法被正确返回。修改Nginx配置，添加静态资源处理规则：

   server{
     listen 80;
     server_name localhost;
     root /app/public;
     index index.php;
   
     # 处理图片、CSS、JS等静态资源
     location ~* \.(png|jpg|jpeg|gif|css|js|ico)$ {
       expires 1y;
       add_header Cache-Control "public, immutable";
     }
   
     location ~ \.php$ {
       fastcgi_pass app:9000;
       fastcgi_index index.php;
       fastcgi_param REQUEST_METHOD $request_method;
       fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
       include fastcgi_params;
     }
   }
   

   修改后重启Nginx容器生效。

2. 检查容器内文件权限与存在性
   进入Nginx容器，验证图片文件是否存在且权限正确：

   # 进入webserver容器（替换为你的容器名称）
   docker exec -it <webserver-container-name> sh
   # 检查图片是否存在
   ls /app/public/images/logoDarkBlue.png
   # 检查文件权限
   ls -l /app/public/images/logoDarkBlue.png
   

   若权限不足，执行以下命令修改：

   chmod 644 /app/public/images/logoDarkBlue.png
   chown nginx:nginx /app/public/images/logoDarkBlue.png
   

3. 验证图片可访问性
   在浏览器中直接访问http://localhost/images/logoDarkBlue.png，若返回404则说明路径或文件存在问题；若能正常显示图片，则页面代码中的路径是正确的，可排除路径问题。

4. 确认Docker卷映射同步
   检查app服务的卷映射是否正确，本地app/public/images目录是否同步到容器内：

   docker exec -it <app-container-name> ls /app/public/images
   

   若容器内无该文件，检查本地文件是否存在，或重启容器重新同步卷。

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