image in block of StreamField is not recognized

Question

This error is shown:

'image' tag should be of the form {% image self.photo max-320x200 [ custom-attr="value" ... ] %} or {% image self.photo max-320x200 as img %}

with line 19 {% image block.value as mein_bild %}

My template:

{% extends "base.html" %}
{% load static wagtailcore_tags wagtailimages_tags %}

{% block content %}

  <div class="notiert">
    <header>
      <h1>{{ page.title }}</h1>
    </header>
   <div class="body">
     {{ page.kurzfassung|richtext }}
     <p>{{ page.first_published_at }}</p>
     {% for block in self.notiert_feld %}
        {% if block.block_type == 'image' %}
           <p>in if image {{ block.value }}</p> 
           {% image block.value as mein_bild %}
           <img {{ mein_bild }} width=530 > 
        {% else %}
          {{ block.value }}
        {% endif %}
    {% endfor %}
    </div>    
  </div>

{% endblock %}

Line 18 I have used for debugging. If I delete line 19 and 20 the name of the image is shown.

Answer 1

As documented at https://docs.wagtail.io/en/stable/topics/images.html, you need to include a resize rule to indicate the size that the image should be rendered at. If you don't want the image to be resized, use original (although keep in mind that it may break your page layout and/or waste bandwidth if an editor uploads an oversized image):

{% image block.value original as mein_bild %}

Answer 2

I thought I tried this variant and got an error. But now it works.

{% extends "base.html" %}
{% load static wagtailcore_tags wagtailimages_tags %}



{% block content %}


  <div class="notiert">
    <header>
      <h1>{{ page.title }}</h1>
    </header>
      <div class="body">
         {{ page.kurzfassung|richtext }}
         <p>{{ page.first_published_at }}</p>
         {% for block in self.notiert_feld %}
            {% if block.block_type == 'image' %}
                {% image block.value width-530 %}
            {% else %}
                {{ block.value }}
            {% endif %}
         {% endfor %}
    </div>    
  </div>




{% endblock %}

Thanks for your answer!