<p>Welcome to Craft!</p>

<p>A very basic piece of code for displaying your image would look like this (the if statement first checks if the field actually has an asset or not):</p>

<pre><code>{% if product.productImage|length %}
    &lt;img src="{{ product.productImage.first.getUrl() }}" /&gt;
{% endif %}
</code></pre>

<p>This quite simply outputs the image as it has been added in Craft, full size. Of course this isn't ideal as the images could be huge. That's why we have <a href="https://craftcms.com/docs/image-transforms" rel="nofollow">Image Transforms</a>, which allow you define the size of the images.</p>

<p>Here is the above code again, but updated to use a new transform we have created in Craft called 'Test Transform', with a handle of 'testTransform':</p>

<pre><code>{% if product.productImage|length %}
    &lt;img src="{{ product.productImage.first.getUrl('testTransform') }}" /&gt;
{% endif %}
</code></pre>

<p>Hopefully that gets you started. I'd recommend reading through the <a href="https://craftcms.com/docs/templating/craft.assets" rel="nofollow">Craft docs</a> for using and templating asset fields.</p>

CC BY-SA 3.0
2016-05-26T22:37:47.183Z
I'd advise adding a `if product.productImage.first()|length` around those examples.  Otherwise if there is no image set on the product you'll get an exception raised.
Jeremy Daalder
CC BY-SA 3.0
2016-05-27T08:36:25.367Z
@JeremyDaalder Good point, I've updated the answer.
Jamie Wade
CC BY-SA 3.0
2016-05-26T16:11:53.327Z
2016-05-27T12:32:05.023Z
2016-05-27T12:32:05.023Z
Jamie Wade
<p>I have added the field "Product Image" to my products. The field is an "asset field" which enables me to upload an image for each product. The field handle is <code>productImage</code>.</p>

<p>How can I output this image in my template?</p>

<templating><assets><plugin-craftcommerce>
Output field content for a product in Craft Commerce
# Output field content for a product in Craft Commerce

(Asked by: username_0 on 2016-05-26)

I have added the field "Product Image" to my products. The field is an "asset field" which enables me to upload an image for each product. The field handle is `productImage`.

How can I output this image in my template?

**Tags:** templating, assets, plugin-craftcommerce

---

## 1 answers

### Answer by username_1 on 2016-05-26. Score: 3 | Accepted answer

Welcome to Craft!
A very basic piece of code for displaying your image would look like this (the if statement first checks if the field actually has an asset or not):
{% if product.productImage|length %}
    
{% endif %}

This quite simply outputs the image as it has been added in Craft, full size. Of course this isn't ideal as the images could be huge. That's why we have Image Transforms, which allow you define the size of the images.
Here is the above code again, but updated to use a new transform we have created in Craft called 'Test Transform', with a handle of 'testTransform':
{% if product.productImage|length %}
    
{% endif %}

Hopefully that gets you started. I'd recommend reading through the Craft docs for using and templating asset fields.

> **Comments:**
> **username_2**: I'd advise adding a `if product.productImage.first()|length` around those examples.  Otherwise if there is no image set on the product you'll get an exception raised.  
> **username_1**: @JeremyDaalder Good point, I've updated the answer.  

---

