通过带有上传按钮的表单显示来自 ImageField 的图像

Display image from ImageField by means of form BUT with Upload button

我一直在寻找解决方案。我看到了这个解决方案来显示图像,而不仅仅是图像的 link:

但现在我需要添加一个按钮,以便他们可以上传新图片。

有什么解决办法吗?提前致谢!

我在FORMS.PY上的代码:

class ProfileUpdateForm(forms.ModelForm):
    class Meta:
        model = Profile
        fields = ['profilePicture', 'coverPicture', 'description', 'job','organizationName','birthday', 'phone','country','city','church','education','website','blog','vlog', 'newsletter', 'mailNotification']
        labels = {
            'profilePicture':'<strong>Profile Picture</strong>',
            'coverPicture':'<strong>Cover Picture</strong>',
            'description':'<strong>Describe yourself</strong>', 
            'job':'<strong>Whats your job title/position?</strong>',
            'organizationName':'<strong>Name of the organization you belong</strong>',
            'birthday':'<strong>Birthday</strong> (YYYY-MM-DD)', 
            'phone':'<strong>Phone Number</strong>',
            'country':'<strong>Country</strong>',
            'city':'<strong>City</strong>',
            'church':'<strong>Name of the local church you attend</strong>',
            'education':'<strong>Tell us about your education</strong>',
            'website':'<strong>Website</strong>',
            'blog':'<strong>Blog</strong>',
            'vlog':'<strong>Vlog</strong>',
            'newsletter':'<strong>Suscribe to the Artventist newsletter</strong> (We hardly send one)',
            'mailNotification':'<strong>Would you like to recive email notifications regarding activity related to your account?</strong>'
            }
    mailNotification = forms.ChoiceField(widget=forms.RadioSelect, label='<strong>Would you like to recive email notifications regarding activity related to your account?</strong>', choices=[(1, 'Instant'), (2, 'Daily'), (3, 'Weekly'),(0, 'No')])
    profilePicture = ImageField(widget=PictureWidget, label='<strong>Profile Picture</strong>')

我假设在 table 中显示图像工作正常。

现在向要添加 img 标签的 html 模板字符串添加一个表单。

表单(action="update-img")由带有旧图像 ID 的隐藏输入和提交按钮组成。

最后我解决了这个在 HTML 中逐个字段显示表单并通过 <img src="url_to_picture">

调用图像的问题