Call Shopify product image

Question

I can call the URL for the image of a product with the following code

{{ product | img_url: "medium" }}

this ouputs:

//cdn.shopify.com/s/files/1/0087/0462/products/shirt14_medium.jpeg?v=1309278311

When I however use this liquid code in an <img> tag like this

<img src="{{ product | img_url: "medium" }}" />

the output is:

<img src="" />

How do I correctly display the image of a product?

drip drip · Accepted Answer · 2019-11-06T09:55:44

It should be:

{{ product.featured_image | img_url: '600x600' | img_tag: product.featured_image.alt }}

the same as:

<img src="{{ product.featured_image | img_url: '600x600' }}" alt="{{product.featured_image.alt}}" />

or

{{ product.images[0]| img_url: '600x600' | img_tag: product.images[0].alt }}

the same as:

<img src="{{ product.images[0] | img_url: '600x600' }}" alt="{{product.images[0].alt}}" />

both of them will work.