Image Picker showing "No Image" after selecting image

Solved
Highlighted
New Member
3 0 0

I'm learning schema customization for the first time, and I've hit a bump straight out of the gate.

Heres my code:

<div>
  <div class="page-width">
<div class="grid grid--uniform grid--flush-bottom">
      <div class="grid__item medium-up--one-third text-center">
        <img src=" {{ section.setting.first_image | img_url:'large'}} "/>
        <h1>{{ section.setting.first_image | img_url:'large' }}</h1>
      </div>
      <div class="grid__item medium-up--one-third text-center">
      </div>
      <div class="grid__item medium-up--one-third text-center">
      </div>
    </div>
  </div>
</div>
    
{% schema %}
  {
    "name": "Product Compare",
    "settings": 
[
{
"id":"first_image",
"type":"image_picker",
"label":"Your Image"
}
]
,
    "presets":
[
    {
      "name":"Product Compare",
      "category":"Product Compare"
    }
    ]
  }
{% endschema %}
 
{% stylesheet %}
{% endstylesheet %}
 
{% javascript %}
{% endjavascript %}

 

The problem is that once I've chosen an image from the image picker, a "No Image" sign appears instead of the image and this is the URL its returning:

//cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif
 
Any ideas?
0 Likes
Highlighted
Shopify Expert
498 9 96

This is an accepted solution.

You are missing an 's' at the end of 'setting' in {{ section.setting.first_image | img_url:'large'}}

Should be {{ section.settings.first_image | img_url:'large'}}

0 Likes