accessing images from backend to frontend

I have an application with following three different docker containers:-
Frontend(react)
Back-end(django)
Nginx for serving static files from frontend,

I am trying to access nginx website in Kubernetes (minikube).from

minikube service my-service

all other data is being served from backend container but only image is not being sent,
It works fine if I use docker-compose
Can someone please help.

debug is true and

MEDIA_URL = ‘/media/’
MEDIA_ROOT = os.path.join(BASE_DIR ,“/app/media”)

I have kept the name of django as django-app and service as django-service,

should I change the following lines in setttings.py file to django-service as well ?
like django-service.urls and django-service.wsgi.application

ROOT_URLCONF = 'backend.urls'

WSGI_APPLICATION = 'backend.wsgi.application'

here is entrypoint.sh file with same name

#!/bin/sh

gunicorn backend.wsgi:application --bind 0.0.0.0:8000

and following is deploment resources

# Django Deployment
apiVersion: apps/v1
kind: Deployment
metadata:
  name: django-app
spec:
  replicas: 1
  selector:
    matchLabels:
      app: django-app
  template:
    metadata:
      labels:
        app: django-app
    spec:
      containers:
      - name: django-container
        image: ash414/e-cart-backend:v1.0
        ports:
        - containerPort: 8000

# Django Service
apiVersion: v1
kind: Service
metadata:
  name: django-service
  labels:
    app: django-app
spec:
  selector:
    app: django-app
  ports:
    - protocol: TCP
      port: 8000
      targetPort: 8000

# Nginx Deployment
apiVersion: apps/v1
kind: Deployment
metadata:
  name: nginx-app
  labels:
    app: nginx-app
spec:
  replicas: 1
  selector:
    matchLabels:
      app: nginx-app
  template:
    metadata:
      labels:
        app: nginx-app
    spec:
      containers:
      - name: nginx-container
        # Not working images
        # image: e-cart-nginx:latest
        # image: ash414/e-cart-nginx:v1.0v
        # image: ash414/e-cart-nginx-dj4:v1.0
        image: ash414/nginx-app4:v1.0
        ports:
        - containerPort: 80

# Nginx Service
apiVersion: v1
kind: Service
metadata:
  name: nginx-service
  labels:
    app: nginx-app
spec:
  selector:
    app: nginx-app
  ports:
    - protocol: TCP
      port: 80
      targetPort: 80

# NodePort Service
apiVersion: v1
kind: Service
metadata:
  name: my-service
spec:
  type: NodePort
  selector:
    app: nginx-app
  ports:
    - port: 80
      targetPort: 80
      nodePort: 30007

Since you mentioned that all other endpoints of your Django app are functioning correctly, it seems likely that the issue might be related to the nginx’s “.conf” directing traffic for “/media/” to an empty folder inside the same container.

Here are a few options for this:

  1. Rename the /media directory to something like /backend-media on your Django app. (BAD)
  2. Update your nginx configuration to properly route the /media traffic to Django. (BETTER)
  3. The best solution might be to set up a Persistent Volume between both Django and nginx. This would allow Django to write to the volume and nginx to read from and serve the contents. (BEST IMO)
  1. Can nginx directly access media file ? or is it accessed via django?
    like nginx makes reest to django, then django gather all data from database and sends it as response to nginx, if so there any point to mount persistent volume?
                                     **OR**
  1. django only sends the data and path of image, but not the image

I have not kept any media column in default.conf

 upstream django-service {
   server django-service:8000;
 }
server {
	listen 80;

	 location /api/ {
	 	proxy_pass http://django-service;
	 }
	location /static/rest_framework/ {
		root /static/;
	}

	location / {
		root /var/www/frontend;
		try_files $uri $uri/ /index.html;
	}
}

and this is dockerfile for django

FROM python:3.8-slim

ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1

RUN pip install --upgrade pip

WORKDIR /app
COPY . /app

RUN pip install -r requirements.txt

COPY ./entrypoint.sh .
ENTRYPOINT [ "sh","/app/entrypoint.sh" ]

EXPOSE 8000

I have tried all three individually and all three combined, but still not working.
Any idea where should I look .

When I use inspection tool on chrome I can see the following path

<img class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1m86w4c" src="/media/images/IMG_20201112_204213.jpg" alt="test product">
http://127.0.0.1:52648/media/images/IMG_20201112_204213.jpg