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

m3eecexj  于 12个月前  发布在  Nginx
关注(0)|答案(1)|浏览(144)

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

worker_processes 1;

events {
    worker_connections 1024;
}

http {
    server {
        listen 80;
        server_name localhost;

        root /usr/share/nginx/html/browser;
        index index.html index.htm;
        include /etc/nginx/mime.types;

        gzip on;
        gzip_http_version 1.1;
        gzip_disable "MSIE [1-6]\.";
        gzip_min_length 256;
        gzip_vary on;
        gzip_proxied expired no-cache no-store private auth;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
        gzip_comp_level 9;

        location / {
            try_files $uri $uri/ /index.html;
            add_header Access-Control-Allow-Origin *;
        }

        location /users_books_pictures/ {
            alias /usr/share/nginx/html/data/;
        }
    }
}

字符串
前端的Dockerfile:

FROM node:20.10-alpine AS build
WORKDIR /app
COPY package*.json .
RUN npm install
RUN npx ngcc --properties es2023 browser module main --first-only --create-ivy-entry-points
COPY . .
RUN npm run build --prod

FROM nginx:stable
COPY --from=build /app/dist/librari-fy/ /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80


Docker-compose文件:

version: '3.8'

services:
  postgres:
    image: postgres:16-alpine
    container_name: postgredatabase
    restart: always
    environment:
      POSTGRES_PASSWORD: password
      POSTGRES_USER: admin
      POSTGRES_DB: Library
    ports:
      - "5432:5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data
    networks:
      - app_internal_network
    healthcheck:
      test: pg_isready
      interval: 10s
      timeout: 60s
      retries: 5
      start_period: 80s 
    
  backend:
    image: sahinyakici/librarybackend:latest
    restart: always
    container_name: backend
    depends_on:
      postgres:
        condition: service_healthy
    networks:
      - app_internal_network
    ports:
      - "8080:80"
    volumes:
      - postgres_data:/app/users_books_pictures

  frontend:
    container_name: librarify
    image: sahinyakici/librarify:latest
    restart: always
    depends_on:
      - backend
    networks:
      - app_internal_network
    ports:
      - 80:80
    expose:
      - 80
    volumes:
      - postgres_data:/usr/share/nginx/html/data

volumes:
  postgres_data:

networks:
  app_internal_network:
    driver: bridge


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

9w11ddsr

9w11ddsr1#

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

相关问题