Create a form to choose between two images

Using Django Templates & Frontend
1

I created two models, one to handle the teams and another to handle the match. I would like to create a view where the user can select team1 or team2 with a form by cliking on the image logo. I manage to

models.py :

class Team(models.Model):
    name = models.CharField(max_length=200)
    logo = models.ImageField(upload_to="images/")
    abbr = models.CharField(max_length=5)


class Match(models.Model):
    team1 = models.ForeignKey('Team', related_name='team1', on_delete=models.PROTECT)
    team2 = models.ForeignKey('Team', related_name='team2', on_delete=models.PROTECT)
    date = models.DateField(null=True)

I managed to show the images with a div like this. But I’m stuck at rendering a form that will show the image

<div class="container">
    <div class="row" style="background-color:gray;">
        {% for match in Matches %}
        <div class="col-2">{{ match.team1.name }}</div>
        <div class="col-3"><img src={{match.team1.logo.url}} alt={{ match.team1.logo.url }} width="100" height="100"></div>
        <div class="col-2">{{ match.date }}</div>
        <div class="col-2">{{ match.team2.name }}</div>
        <div class="col-3"><img src={{match.team2.logo.url}} alt={{ match.team2.logo.url }} width="100" height="100"></div>
        {% endfor %}
    </div>

Tryout form

 <div class="row" style="background-color:gray;">
        {% for match in Matches %}
        <select name="test" class="form-control">
            <option value={{match.team1.abbr}}><img src={{match.team1.logo.url}} alt={{match.team1.name}} width="100" height="100"></option>
            <option value={{match.team2.abbr}}><img src={{match.team2.logo.url}} alt={{match.team2.name}} width="100" height="100"></option>
        </select>{% endfor %}
    </div>

I am using Django 4.0.6 and I’m wondering how to show a simple form that will display the two logo and make them selectable (single selection, no need for multi).

Thank you

2

if you want to display an image that works as a button, then maybe it should just try to get the image from a static files directory? I wouldn’t be trying to grab the image from the database if the image is simply supposed to be a button.

https://docs.djangoproject.com/en/4.1/howto/static-files/

3

Thank you for your answer but I don’t think the problem here is the link to the image. In all my other forms image are showing fine, and even with a static image I’m not able to manage the form I would like to obtain

4

instead of using the url of an Image, will it work with:

<img src={{ match.team1.logo.path }} width="100" height="100">?

Have you set MEDIA_ROOT in settings.py?

I’m doing things the old way:

import os

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