我用NGINX服务的Angular应用程序不显示图像

m3eecexj  于 2024-01-06  发布在  Nginx
关注(0)|答案(1)|浏览(188)

我在写一个全栈的应用,前端写了Angular,用nginx docker服务,通过和后端的通信就可以接收数据,其中就有Imagepath,这样就可以在本地显示图片了,但我觉得是Docker和Nginx的原因,即使图片路径正确也不显示,我留下一个图片作为例子,图像src部分是正确的。如果我在容器中转到这个路径,我可以看到图片,但我不能在屏幕上看到图片。Didn't show image
我的nginx.conf文件:

  1. worker_processes 1;
  2. events {
  3. worker_connections 1024;
  4. }
  5. http {
  6. server {
  7. listen 80;
  8. server_name localhost;
  9. root /usr/share/nginx/html/browser;
  10. index index.html index.htm;
  11. include /etc/nginx/mime.types;
  12. gzip on;
  13. gzip_http_version 1.1;
  14. gzip_disable "MSIE [1-6]\.";
  15. gzip_min_length 256;
  16. gzip_vary on;
  17. gzip_proxied expired no-cache no-store private auth;
  18. gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  19. gzip_comp_level 9;
  20. location / {
  21. try_files $uri $uri/ /index.html;
  22. add_header Access-Control-Allow-Origin *;
  23. }
  24. location /users_books_pictures/ {
  25. alias /usr/share/nginx/html/data/;
  26. }
  27. }
  28. }

字符串
前端的Dockerfile:

  1. FROM node:20.10-alpine AS build
  2. WORKDIR /app
  3. COPY package*.json .
  4. RUN npm install
  5. RUN npx ngcc --properties es2023 browser module main --first-only --create-ivy-entry-points
  6. COPY . .
  7. RUN npm run build --prod
  8. FROM nginx:stable
  9. COPY --from=build /app/dist/librari-fy/ /usr/share/nginx/html
  10. COPY nginx.conf /etc/nginx/nginx.conf
  11. EXPOSE 80


Docker-compose文件:

  1. version: '3.8'
  2. services:
  3. postgres:
  4. image: postgres:16-alpine
  5. container_name: postgredatabase
  6. restart: always
  7. environment:
  8. POSTGRES_PASSWORD: password
  9. POSTGRES_USER: admin
  10. POSTGRES_DB: Library
  11. ports:
  12. - "5432:5432"
  13. volumes:
  14. - postgres_data:/var/lib/postgresql/data
  15. networks:
  16. - app_internal_network
  17. healthcheck:
  18. test: pg_isready
  19. interval: 10s
  20. timeout: 60s
  21. retries: 5
  22. start_period: 80s
  23. backend:
  24. image: sahinyakici/librarybackend:latest
  25. restart: always
  26. container_name: backend
  27. depends_on:
  28. postgres:
  29. condition: service_healthy
  30. networks:
  31. - app_internal_network
  32. ports:
  33. - "8080:80"
  34. volumes:
  35. - postgres_data:/app/users_books_pictures
  36. frontend:
  37. container_name: librarify
  38. image: sahinyakici/librarify:latest
  39. restart: always
  40. depends_on:
  41. - backend
  42. networks:
  43. - app_internal_network
  44. ports:
  45. - 80:80
  46. expose:
  47. - 80
  48. volumes:
  49. - postgres_data:/usr/share/nginx/html/data
  50. volumes:
  51. postgres_data:
  52. networks:
  53. app_internal_network:
  54. driver: bridge


我改变了Nginx的配置,并在论坛上寻找答案,但找不到。
Incoming data

9w11ddsr

9w11ddsr1#

NGINX服务器的root URL已经设置为/usr/share/nginx/html/browser,所以你不需要在imagePath数据中添加这个前缀。NGINX默认会在根文件夹中查找,并尝试从根文件夹中获取URL指定路径的资源。
因此,您需要删除imagePath数据的/usr/share/nginx/html/browser前缀,它应该可以做到这一点:)

相关问题