Angular+Nginx Docker部署环境下图片无法显示问题求助

针对本地可正常显示图片，但Docker部署后无法加载的问题，可从以下几个方向排查解决：

1. 验证Nginx路径映射配置 #

首先确认Nginx的location与alias是否正确映射：

• 进入前端容器，检查图片文件是否存在于指定目录：

  docker exec -it librarify ls /usr/share/nginx/html/data
  

• 在容器内测试Nginx是否能正确返回图片：

  docker exec -it librarify curl -I http://localhost/users_books_pictures/[你的图片文件名]
  

  如果返回404 Not Found，说明路径映射有误。请确认：
  • location /users_books_pictures/的末尾斜杠与alias /usr/share/nginx/html/data/的末尾斜杠保持一致（两者都要有或都没有）
  • 前端容器的postgres_data卷确实挂载到了/usr/share/nginx/html/data

2. 修复文件权限问题 #

图片无法加载最常见的原因是Nginx进程（默认用户nginx）没有读取图片文件的权限：

• 查看容器内图片文件的权限：

  docker exec -it librarify ls -l /usr/share/nginx/html/data
  

  如果文件所有者不是nginx或权限不足（如-rw-------），可通过以下方式调整：
  • 方案一：在前端容器启动时添加权限修复命令，修改docker-compose.yml的frontend服务：

    frontend:
      # ...其他配置
      command: /bin/sh -c "chown -R nginx:nginx /usr/share/nginx/html/data && nginx -g 'daemon off;'"
    

  • 方案二：修改后端服务，确保写入图片时设置可读权限（如写入后执行chmod 644 [文件路径]）

3. 检查Nginx日志定位问题 #

查看Nginx的访问日志和错误日志，获取具体报错信息：

docker logs librarify

如果日志中出现permission denied，说明是权限问题；如果是404，则是路径映射问题。

4. 确认Angular渲染的图片URL正确 #

确保前端从后端获取的图片路径是绝对路径（如/users_books_pictures/xxx.jpg），而非相对路径或后端的内部路径（如/app/users_books_pictures/xxx.jpg）。

内容的提问来源于stack exchange，提问作者Şahin Yakıcı