在selection -Django Python的select选项中显示图像

# widgets.py
from django.forms.widgets import Select
from django.utils.safestring import mark_safe

class ImageSelect(Select):
    def render_option(self, selected_choices, option_value, option_label):
        option_value = str(option_value)
        if option_value in selected_choices:
            selected_html = ' selected="selected"'
            selected_choices.remove(option_value)
        else:
            selected_html = ''
        return mark_safe('<option value="%s"%s>%s</option>' % (
            option_value,
            selected_html,
            self.render_image(option_label)
        ))

    def render_image(self, image_url):
        return f'<img src="{image_url}" alt="Image" style="width: 20px; height: 20px; vertical-align: middle; margin-right: 5px;">'

# forms.py
from django import forms
from .widgets import ImageSelect

class MyForm(forms.Form):
    my_field = forms.ChoiceField(
        choices=[
            ('1', 'Option 1'),
            ('2', 'Option 2'),
            # 添加图像URL
            ('3', 'Option 3'),
        ],
        widget=ImageSelect(attrs={'class': 'image-select'})
    )

<!-- template.html -->
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Submit</button>
</form>