The Angular application I serve with NGINX does not display images

Issue

I'm writing a full stack application. I wrote Angular for the front end and serve it with nginx docker. I can receive data by communicating with the backend. Imagepath is among this data. In this way, I can show the images locally, but I think it is due to Docker and Nginx that the image path is not displayed even if it is correct. I leave an image as an example, the image src part is correct. If I go to this path in the container, I can see the picture, but I cannot see the picture on the screen. Didn't show image

My nginx.conf file:

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 for frontend:

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 file:

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

I changed the Nginx configurations and searched for an answer in the forum but could not find it.

Incoming data

Solution

The root URL of your NGINX server is already set to /usr/share/nginx/html/browser, so you don't need to add this prefix to your imagePath data. NGINX will look in the root folder by default and try to get a ressource at the path specified by your URL, from the root folder.

Therefore you need to remove /usr/share/nginx/html/browser prefix of your imagePath datas and it should do the trick :)

Answered By - ABWassim