How do I get a field value in a template? I want to change the default HTML for a custom field called field_product_image and I created the field--field_product_image.html.twig template. Now I need to fill in the following information in the HTML, but for some reason I cannot get the content of the fields. 

&lt;img src="{{ TWIG }}" alt="{{ TWIG }}" /&gt;


I tried different suggestions like {{ content }}, {{ field.field_product_image }}, {{ field.field_product_image.value }}, {{ content.field_product_image }}, {{ content.uri.value  }} but they don't output the image link.
A simpler way to do this is to use mytheme_preprocess_image(). 

Here is an example:

/**
 * Implements hook_preprocess_image().
 */
function MYTHEME_preprocess_image(&amp;$variables) {
  if ($variables['style_name'] == 'content_embed') {
    $variables['attributes']['class'][] = 'custom_class';
  }

  $variables['attributes']['data-custom-attr'] = 'value';
}


Variables can be used to construct new values that get injected before rendered. The above would add custom_class to a rendered images class attribute if a specific image style is being used in this instance, and all images would receive the second attribute. Rendering the image will already give you the src and alt attributes for you, so which attributes are you really trying to add?

Reaching into render arrays in the template just leads to a ton of cruft and hard to maintain code because it's really not the place for that.

If you don't want any divs or wrapping HTML in your field, you can just add this to the field twig template:

{% for item in items %}
  {{ item.content }}
{% endfor %}


This would only render the field item (in this case image), which should leave you with only the image tag on the page and no containers.