Call Shopify product image

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?

Solution

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}}" />

{{ 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.