Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-26T22:37:47.183Z
Answers.Text: 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.
Answers.UserDisplayName: Jeremy Daalder
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-27T08:36:25.367Z
Answers.Text: @JeremyDaalder Good point, I've updated the answer.
Answers.UserDisplayName: Jamie Wade
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-26T16:11:53.327Z
Answers.LastActivityDate: 2016-05-27T12:32:05.023Z
Answers.LastEditDate: 2016-05-27T12:32:05.023Z
Answers.UserDisplayName: Jamie Wade
Body: <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>
  
Tags: <templating><assets><plugin-craftcommerce>
Title: Output field content for a product in Craft Commerce
ThreadText: # 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 %}
      <img src="{{ product.productImage.first.getUrl() }}" />
  {% 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](https://craftcms.com/docs/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 %}
      <img src="{{ product.productImage.first.getUrl('testTransform') }}" />
  {% endif %}
  
  ```
  
  Hopefully that gets you started. I'd recommend reading through the [Craft docs](https://craftcms.com/docs/templating/craft.assets) 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**: @username_2 Good point, I've updated the answer.  
  
  ---
  
  