How to display an uploaded image in "Change" page in Django Admin?

Question

I'm trying to display an uploaded image in "Change" page in Django Admin but I cannot do it as shown below:

This is my code below:

# "models.py"

from django.db import models

class Product(models.Model):
    name = models.CharField(max_length=50)
    price = models.DecimalField(decimal_places=2, max_digits=5)
    image = models.ImageField()
    
    def __str__(self):
        return self.name

# "admin.py"

from django.contrib import admin
from .models import Product

@admin.register(Product)
class ProductAdmin(admin.ModelAdmin):
    pass

So, how can I display an uploaded image in "Change" page in Django Admin?

Answer 1

You need to override AdminFileWidget then assign CustomAdminFileWidget to formfield_overrides as shown below:

# "admin.py"

from django.contrib import admin
from .models import Product
from django.contrib.admin.widgets import AdminFileWidget
from django.utils.html import format_html
from django.db import models
                            # Here
class CustomAdminFileWidget(AdminFileWidget):
    def render(self, name, value, attrs=None, renderer=None):
        result = []
        if hasattr(value, "url"):
            result.append(
                f'''<a href="{value.url}" target="_blank">
                      <img 
                        src="{value.url}" alt="{value}" 
                        width="100" height="100"
                        style="object-fit: cover;"
                      />
                    </a>'''
            )
        result.append(super().render(name, value, attrs, renderer))
        return format_html("".join(result))

@admin.register(Product)
class ProductAdmin(admin.ModelAdmin):
    formfield_overrides = {           # Here
        models.ImageField: {"widget": CustomAdminFileWidget}
    }

Then, an uploaded image is displayed in "Change" page in Django Admin as shown below:

You can also see my answer explaining how to display uploaded images in "Change List" page in Django Admin.