Search code examples
shopifysectionsimagepicker

Image not displaying using shopify image_picker in custom section


I have created a custom section in a shopify theme. Within the {%schema%} tags, this is my code:

{% schema %}
 {
     "name": "about",
     "settings": [
                    {
                        "type": "text",
                        "label": "Heading",
                        "id": "heading"
                    },
                    {
                        "type": "richtext",
                        "label": "description",
                        "id": "description"
                    }

                ],
        "blocks" : [
            {
                "type": "image",
                "name" : "image block",
                "settings" : [
                    {
                        "type": "image_picker",
                        "label": "your image",
                        "id" : "image"
                    }
                ]
            }
        ],
    "presets": [{
    "name": "about",
    "category": "image",
        }]
    }
}
 {% endschema %} 

Text and richtext work fine as well as the option to upload an image, however the image does not render on the page. It just displays the typical image not found icon.

Here is how I am trying to display the image:

{% for block in section.blocks %}
    <img src="{{ block.settings.image | image_url:'master'}}"/>
{%endfor%}

I have even tried uploading the 'free images'.


Solution

  • Change the | image_url filter to | img_url