can't display products images using liquid

[Bontalexel31]

Hey guys,

I can't display my product images using this liquid snippet from the shopify liquid cheatsheet.

{% for image in product.images %}
  <img src="{{ image.src | product_img_url: 'medium' }}">
{% endfor %}

Is there any other way I could display all images of a product on demand with another liquid snippet?

[Dan-From-Ryviu]

Hi @Bontalexel31 

You can try to use this code instead.

 {%- for media in product.media -%}     
 {{
        media.preview_image
        | image_url: width: 1946
        | image_tag:
          loading: lazy,
          sizes: 500,
          widths: '246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946'
  }}
{%- endfor -%}

[tim]

Instead of 

 <img src="{{ image.src | product_img_url: 'medium' }}">

You should do

 <img src="{{ image | product_img_url: 'medium' }}">

 image.src is a string, but product_img_url expects image object as input.

[Bontalexel31 · Accepted solution]

I found this one to work best for me.

{% for image in product.images %}
                {{ image | image_url: width: 30, height:30 | image_tag}}
            {% endfor %}

 What do you guys think about it?

[tim]

It's fine both ways.

product_img_url is and old way of creating image URLs, image_url is a newer one.