来自模型 django ModelForm 的图像下拉列表

Question

我有一个表单，用户可以在其中更新他们的个人资料。我希望用户从所有可用的个人资料图片（来自ProfilePictures 模型的个人资料图片库）的下拉列表中选择他们想要作为他们的个人资料图片。目前表单返回图像 URL 的字符串。我怎样才能使实际图像在 下拉，以便用户在选择所需的图像之前查看所有图像？

Models.py

class ProfilePicture(models.Model):
image = models.ImageField(upload_to='profile_pics', blank=True)

def __str__(self):
    return f'{self.image.url}'


class Profile(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    bio = models.TextField(default='???? Your Bio ???? ???? ????', max_length=200)
    pic = models.ForeignKey(ProfilePicture, on_delete=models.SET_DEFAULT, default='1')

    def __str__(self):
        return f'{self.user.username} Profile'

Forms.py

class ProfileUpdateForm(forms.ModelForm):
class Meta:
    model = Profile
    fields = ['bio','image','pic']
    # widgets = {
    #     'pic': ImageField(),
    # }

当前下拉列表的图片

Answer 1

您可以手动呈现选择。

如果你的ModelForm 看起来像这样：

class ProfileUpdateForm(forms.ModelForm):

    class Meta:
        model = Profile
        fields = ['bio','pic']

那么您可以在模板中将这个 pic 字段渲染为：

<form method="post" action="" >
    {% csrf_token %}>

    <select name="{{ form.pic.name }}">
        {% for q in form.pic.field.queryset %}
            <option value="{{ q.pk }}"><img src={{ q.url }}></img></option>
        {% endfor %}
    </select>

    # ..
    # add other fields
</form>