Django- how to render images in templates uploaded from admin?

Question

I want to render images that I uploaded from my Django admin in my template views. Since I need to upload multiple images at a time, I declared a separate model, ShowPhoto, with a foreign key attached to my Problem model:

models.py

class Problem(models.Model):
    slug = models.SlugField(null = False, unique = True, max_length = 255)
    topic = models.ForeignKey(Topic, on_delete = models.CASCADE)
    free = models.CharField(max_length = 1, choices = Free)

    #problem when introducing UUID field
    traceID = models.UUIDField(default=uuid.uuid4, editable = True)

    #use meta tags to optimize SEO
    metaTags = models.TextField(default = "")

    questionToProblem = models.TextField()

class ShowPhoto(models.Model):
    show = models.ForeignKey(Problem, on_delete = models.CASCADE, related_name = "photos")
    photo = models.ImageField()

    class Meta:
        verbose_name = 'Solution Image'
        verbose_name_plural = 'Solution Images'

Thus, in my admin.py, I also added:

class AdminImageWidget(AdminFileWidget):
    def render(self, name, value, attrs=None, renderer = None):
        output = []
        if value and getattr(value, "url", None):
            image_url = value.url
            file_name = str(value)
            output.append(u' <a href="%s" target="_blank"><img src = "%s" alt="%s" width="600" height="600"  style="object-fit: cover;"/></a> %s ' % \
                (image_url, image_url, file_name, _('')))
        output.append(super(AdminFileWidget, self).render(name, value, attrs))
        return mark_safe(u''.join(output))

class ShowPhotoInline(admin.TabularInline):
    model = ShowPhoto
    formfield_overrides = {models.ImageField: {'widget': AdminImageWidget}}

@admin.register(Problem)
class ProblemModelAdmin(admin.ModelAdmin):
    form = ProblemForm
    list_display = ('questionToProblem', 'topic', 'free', 'traceID')
    search_fields = ('questionToProblem', 'traceID')
    readonly_fields = ('traceID',)
    fields = ('slug', 'traceID', 'topic', 'free', 'metaTags', 'questionToProblem', 'solutionToProblem', 'photos') #'solution_on_webpage', 'photos')
    inlines = [ShowPhotoInline]

    def save_related(self, request, form, formsets, change):
        super().save_related(request, form, formsets, change)
        form.save_photos(form.instance)

How would I write a view to render the images that I upload in my admin? When I try to write a QuerySet using the filter command like this: views.py

def displaySolution(request, topic_slug, problem_slug):
    try:
        solution = Problem.objects.get(topic__slug = topic_slug, slug = problem_slug)
        image = ShowPhoto.objects.filter(show = solution)
    except Exception as e:
        raise e
    return render(request, 'solution.html', {'solution' : solution, 'image' : image})

The QuerySet is called, but the rendering in the template is still blank. What do I need to do to fix it?

Danny Danny · Accepted Answer · 2021-07-14T21:21:02

Have you tried to specify the local path you want your images to be uploaded, like this:

class ShowPhoto(models.Model):
    show = models.ForeignKey(Problem, on_delete = models.CASCADE, related_name = "photos")
    photo = models.ImageField(upload_to = 'static/img')

Don't forget to run python manage.py makemigrations and python manage.py migrate after changing models.py

Django- how to render images in templates uploaded from admin?

1 Answers