ImageField以清晰的形式布局预览

时间:2014-01-12 15:09:50

标签: django forms django-models django-crispy-forms

我想显示ImageField中的图像。我正在使用Django crispy forms。我似乎需要使用HTML布局助手,但我不知道如何在这里访问模板变量。

以下内容呈现空白图片标记:

HTML('<img src="{{ logo.url }}" />')

我是否提到这个错误,或者是否有更好的方法以酥脆的形式出现?

以下是完整的代码,以便您可以获得更好的想法:

forms.py

class CompanyForm(forms.Form):
    name = forms.CharField(required=False, label="Company name")
    logo = forms.ImageField(required=False, label="Logo")

    # form layout
    helper = FormHelper()
    helper.form_class = 'form-horizontal'
    helper.layout = Layout(
        Div(
            'name',
            HTML('<img src="{{ logo.url }}" />'),
            css_class='span4',
        ),

        FormActions(
            Submit('submit', 'Save', css_class="btn-primary pull-right"),
        )
    )

models.py

class Company(models.Model):
    name = models.CharField(max_length=100)
    logo = models.ImageField(upload_to = 'logos/', null=True)

views.py

我在视图中设置了表单的初始值:

...
profile = Company.objects.get(name="foo")
form = CompanyForm(initial={'name': profile.name, 'logo': profile.logo, })

context = {
    'profile_form' : form,
}

return render_to_response('dashboard/company-profile.html', context_instance=RequestContext(request, context))    

公司profile.html

{% load crispy_forms_tags %}
<div class="row">
  {% crispy profile_form %}
</div>

3 个答案:

答案 0 :(得分:11)

好笑,我今天刚刚在内联图片上传表格集上处理同样的问题,我最终得到了这个实现:

class ImageModelForm(forms.ModelForm):

    class Meta:
        model = ImageModel

    def __init__(self, *args, **kwargs):
        super(ImageModelForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper(self)
        self.helper.form_tag = False
        self.helper.disable_csrf = True
        self.helper.layout = Layout(
            'title',
            'description',
            'imagefile',
            HTML("""{% if form.imagefile.value %}<img class="img-responsive" src="{{ MEDIA_URL }}{{ form.imagefile.value }}">{% endif %}""", ),
            'flag_featured',
        )

答案 1 :(得分:0)

进一步向@petkostas回答,特别是关于来自@Banjer的图片重载评论: - 我也有一个表单的问题,设法通过在views.py中引入条件语句来解决这个问题(注意,下面没有包含上下文语句):

if request.method == "POST":
       if form.is_valid():
          #do stuff
       return HttpResponseRedirect(reverse('your_named_url'))
elif request.method =="GET":
       return render(request, 'path/to/template.html', context)

这样做可以让页面在新内容更新时重新加载(因此您可以使用前面提到的form.imagefile.value属性)

!这是一个非常具体的用例,但我希望它可以帮助别人节省一点时间

答案 2 :(得分:0)

从 2020 年以后看到此问题的人,此问题已修复,因为可能是 v1.10、v.1.9 或附近。 我在 v.1.8 中遇到了同样的问题。