Can not select image in custom section in Shopify

Question

I created a custom section with text and image in Shopify. The problem is that when I select an image in the section, it displays "Something went wrong. Please try again in a few minutes" and the select button is disabled. My custom section looks like:

<section id="menu">
  <div class="wrapper">
    <div class="slider-menu">
      <div class="menu-wrapper">
        <div class="menu-photo">
          {% for block in section.blocks %}  
            {% case block.type %}
          
              {% when 'image' %}  
                <div class="slide"><img class="load lazyload" data-src="{{ block.settings.image.src | img_url: "medium" }}" width="1140" height="715" alt="フ"></div> 
          
            {% endcase %} 
          {% endfor %}
        </div>
      </div>
  </div>
</section>

{% schema %}
{
  "name": "about-slider",
  "tag": "section",
  "class": "section",
  "blocks": [
    {
      "name": "about_slider_blocks",
      "type": "image",      
      "settings": [
        {
          "type": "text",
          "id": "about_tab_name",
          "label": "Tab Name"
        },
        {
          "type": "text",
          "id": "about_tab_content_heading",
          "label": "Tab Heading"
        },
        {
          "type": "richtext",
          "id": "about_tab_content",
          "label": "Tab Body"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Tab Image"
        }        
      ]
    }
  ],
  "max_blocks": 5,
  "presets": [
    {
      "name": "custom-about-slider",
      "blocks": [
        {
          "type": "image"
        }
      ]
    }
  ]
}
{% endschema %}

What am I doing wrong?

The "text" and "richtext" blocks are working fine.

Answer 1

The quick answer is change data-src to src in your img tag.

Or else set up the image the way the other images in the theme are set up using a data attribute look into how the theme performs lazy loading.