Django Formset image.url 未填充

Question

我有一个模型上的图像字段，我想在 img 标记内渲染。它在表单集中，我可以看到图像的链接，但如果我尝试引用 form.image.url 则没有任何返回。 form.image 返回 "Current :" "" 由于前导字符串而中断。如何让图像显示？

堆栈

Django 2.1，使用 S3 的 django-storages

存储设置

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
AWS_DEFAULT_ACL = 'None'
AWS_S3_REGION_NAME = "us-east-1"
AWS_LOCATION = "images"
AWS_STORAGE_BUCKET_NAME = 'fakebucketname'
MEDIA_URL = 'http://%s.s3.amazonaws.com/' % AWS_STORAGE_BUCKET_NAME
AWS_S3_HOST = 's3.us-east-1.amazonaws.com'
AWS_DEFAULT_ACL = None

模型

class Note(models.Model):
user = models.CharField(null=True, max_length=25)
image = models.ImageField(upload_to="%Y/%m/%d/")
text = models.TextField(verbose_name='Text', null=True)
pub_date = models.DateTimeField(auto_now_add=True)
report = models.ForeignKey(Report, on_delete=models.CASCADE, null=True)

def __str__(self):
    return self.user

class Report(models.Model):
name = models.DateField(auto_now_add=True, unique=True, verbose_name='Report Name')
slug = models.SlugField(blank=True)

def __str__(self):
    return str(self.name)

def __unicode__(self):
    return u"%s" % self.name

def save(self, *args, **kwargs):
    self.slug = slugify(self.name)
    return super(Report, self).save(*args, **kwargs)

def get_absolute_url(self):
    from django.urls import reverse
    return reverse('report_detail', args=[str(self.id)])

表格

from TheDaily.models import Report, Note
from django.forms import ModelForm, inlineformset_factory


class NoteForm(ModelForm):

    def __init__(self, *args, **kwargs):
        super(NoteForm, self).__init__(*args, **kwargs)
        self.fields['image'].required = False

    class Meta:
        model = Note
        exclude = ()


class ReportForm(ModelForm):
    class Meta:
        model = Report
        fields = '__all__'

NoteFormset = inlineformset_factory(Report, Note, form=NoteForm, extra=1)

查看

def manage_reports(request, pk):
    class Media(object):
        js = formset_media_js + (
        ) 

report = Report.objects.get(pk=pk)
note_inline_form_set = inlineformset_factory(Report, Note, extra=2,
                                             fields=('user', 'category', 'text', 'report', 'image'),
                                             widgets={'text': forms.Textarea(attrs={'class': 'form-control'}),
                                                      'user': forms.TextInput(attrs={'class': 'form-control'}),
                                                      'image': forms.ClearableFileInput,
                                                      'category': forms.Select(attrs={'class': 'form-control'})})
if request.method == "POST":
    formset = note_inline_form_set(request.POST, request.FILES, instance=report)

    if formset.is_valid():
        for form in formset:
            form.cleaned_data['user'] = request.user.username
        formset.save()
        return HttpResponseRedirect('/')
else:
    formset = note_inline_form_set(instance=report)
return render(request, 'daily/report.html', {'formset': formset})

模板

<form action="" method="post" enctype="multipart/form-data">{% csrf_token %}

    {% load formset_tags %}
    <div id="formset" data-formset-prefix="{{ formset.prefix }}">
                    {{ formset.management_form }}

      <div data-formset-body>
      <!-- New forms will be inserted in here -->
      {% for form in formset %}
      <div data-formset-form>
          {{ form.as_p }}
           <img id="image_preview"src="{{ form.image.url }}"/>
                            </div>
                        {% endfor %}
                    </div>

                    <!-- The empty form template. By wrapping this in a <script> tag, the
                    __prefix__ placeholder can easily be replaced in both attributes and
                    any scripts -->
                    <script type="form-template" data-formset-empty-form enctype="multipart/form-data">
                        {% escapescript %}
                            <div data-formset-form>
                                {{ formset.empty_form }}
                            </div>
                        {% endescapescript %}
                    </script>

                    <!-- This button will add a new form when clicked -->
                    <input type="button" value="Add another" data-formset-add class="btn btn-w-md btn-info">
                    <input type="submit" value="Submit" class="btn btn-w-md btn-accent"/>


                    <script>jQuery(function ($) {
                        $("#formset").formset({
                            animateForms: true
                        });
                    });</script>

                </div>

            </form>

Answer 1

Django ModelForm ImageField

我选择了第二个选项并制作了 NonClearableImageInput 小部件。看起来效果不错