Admin Image Preview Not Found In Production, meanwhile everything works fine in Local Server

Using Django Deployment
1

I have some issue with showing the image in django admin, it works well in local server, but got error 404 in production server… it seems something about the media root or pathing in setting… but i dont know, hope i can get an enlightment here…

so let’s start with my model to save the image…

def progress_photos_upload_path(instance, filename):
    return os.path.join('image/bap/progress', instance.nama_proyek, filename)

def kwitansi_photos_upload_path(instance, filename):
    return os.path.join('image/bap/kwitansi', instance.nama_proyek, filename)

class TerminPembayaran(models.Model):
   #other fields
    foto_progress = models.ImageField(upload_to=progress_photos_upload_path,blank=True,null=True)
    foto_kwitansi = models.ImageField(upload_to=kwitansi_photos_upload_path,blank=True,null=True)

and here’s my admin

@admin.register(TerminPembayaran)
class TerminPembayaranAdmin(admin.ModelAdmin):
## other admin settings
def display_foto_progress(self, obj):
        if obj.foto_progress:
            return format_html('<a href="{}" target="_blank"><img src="{}" style="max-height:50px; max-width:50px;" /></a>', obj.foto_progress.url, obj.foto_progress.url)
        else:
            return '(No Image)'

    display_foto_progress.short_description = 'Foto Progress'

    def display_foto_kwitansi(self, obj):
        if obj.foto_kwitansi:
            return format_html('<a href="{}" target="_blank"><img src="{}" style="max-height:50px; max-width:50px;" /></a>', obj.foto_kwitansi.url, obj.foto_kwitansi.url)
        else:
            return '(No Image)'

    display_foto_kwitansi.short_description = 'Foto Kwitansi'

and it supposed to be like this in the admin interface

but with the same code, when i run in production server, its return error (not literally error but the image just not found.)

okay so now i suspect this could only be the problem of image path in settings, i will show you the settings.py related to static and media.

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

STATIC_URL = "static/"

STATICFILES_DIRS = [BASE_DIR / "static_root"]

DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"

MEDIA_URL = '/media/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

anyone know about this? and how to fix this? thankyou in advance

2

Side note: When posting blocks of code here, enclose each block between lines of three backtick - ` characters. This means you’ll have a line of ```, then the code, then another line of ```. This forces the forum software to keep that code properly formatted. (I’ve taken the liberty of correcting your original post, please remember to do this in the future.)

3

What server are you using to run your application? (nginx? Apache?) Is it configured to serve files from both static_root and media?

What URLs are you seeing being requested for those files? What error messages are showing up in the server logs?

4

my OS is AlmaLinux-8
and my web server is nginx version 1.14.1

i dont know what or how to configure the nginx for static_root and media like u said,
can u tell me the specific path to set the configuration?
or do u want me to show here the file setting?

btw, thankyou for the fast response! i really appreciate it!

5

By this he means to say that in your nginx file you should do something like this

    location /static/ {
        alias /home/portfolio/staticfiles/;
    }
    location /media/ {
        root /home/portfolio;
        client_max_body_size 900M;
    }

In order to serve the static and media files.

6

conf.d fastcgi_params mime.types scgi_params uwsgi_params
default.d fastcgi_params.default mime.types.default scgi_params.default uwsgi_params.default
fastcgi.conf koi-utf nginx.conf sites-available win-utf
fastcgi.conf.default koi-win nginx.conf.default sites-enabled

these are all of the files in my nginx, so which one should i put the settings to?

7

oh btw, there is no error printed in my debug.log file @KenWhitesell

8

What book, tutorial, or blog post are you following to deploy your project?

(And I would be referring to the nginx error.log file for the server, not your Django logs.)

9

i got all tutorial from chatGPT. but sometimes if chatGPT didnt give me correct solution, i will refer from stacksoverflow.

okay so for the updated about your question, i cannot find the error.log file in nginx folder in my server, is it a template file from the nginx or should i do something to print them?

10

You know, the only place worse than SO to learn about stuff like this would be chatGPT. Please, do yourself a favor and never rely upon either of them as a primary resource. As a starting point maybe, but never blindly trust them.

Find a well-written source, likely a blog post, such as How To Set Up Django with Postgres, Nginx, and Gunicorn on Ubuntu 20.04 | DigitalOcean.

And if you’re not familiar with running web servers in general and nginx in particular, be prepared to spend some time reading through its docs as well. Start at nginx documentation.

It’s been said a few times here, among other places, that properly deploying a Django project is one of the most confusing things you’ll ever do with Django because of the number of different parts that all need to work together. There are no real shortcuts here without an understanding of the parts.