How to get an image URL from a field in a twig template I have a node that contains various fields. I am able to get the values of text fields but not an image field. Below is the relevant output of the node variable being dumped in the twig template:

 'field_main_image' =&gt; 
    object(Drupal\field\Entity\FieldConfig)[1312]
      protected 'deleted' =&gt; boolean false
      protected 'fieldStorage' =&gt; null
      protected 'id' =&gt; string 'node.homepage.field_main_image' (length=30)
      protected 'field_name' =&gt; string 'field_main_image' (length=16)
      protected 'field_type' =&gt; string 'image' (length=5)
      protected 'entity_type' =&gt; string 'node' (length=4)
      protected 'bundle' =&gt; string 'homepage' (length=8)
      protected 'label' =&gt; string 'Main image' (length=10)
      protected 'description' =&gt; string '' (length=0)
      protected 'settings' =&gt; 
        array (size=12)
          ...
      protected 'required' =&gt; boolean false
      protected 'translatable' =&gt; boolean false
      protected 'default_value' =&gt; 
        array (size=0)
          ...
      protected 'default_value_callback' =&gt; string '' (length=0)
      protected 'itemDefinition' =&gt; null
      protected 'constraints' =&gt; 
        array (size=0)
          ...
      protected 'originalId' =&gt; string 'node.homepage.field_main_image'     (length=30)
      protected 'status' =&gt; boolean true
      protected 'uuid' =&gt; string 'f40a7a65-18a5-4ced-85b0-ab1cdc41b2f5' (length=36)
      private 'isSyncing' (Drupal\Core\Config\Entity\ConfigEntityBase) =&gt; boolean false
      private 'isUninstalling' (Drupal\Core\Config\Entity\ConfigEntityBase) =&gt; boolean false
      protected 'langcode' =&gt; string 'en' (length=2)
      protected 'third_party_settings' =&gt; 
        array (size=0)
          ...
      protected '_core' =&gt; 
        array (size=0)
          ...
      protected 'trustedData' =&gt; boolean false
      protected 'entityTypeId' =&gt; string 'field_config' (length=12)
      protected 'enforceIsNew' =&gt; null
      protected 'typedData' =&gt; null
      protected 'cacheContexts' =&gt; 
        array (size=0)
          ...
      protected 'cacheTags' =&gt; 
        array (size=0)
          ...
      protected 'cacheMaxAge' =&gt; int -1
      protected '_serviceIds' =&gt; 
        array (size=0)
          ...
      protected 'dependencies' =&gt; 
        array (size=2)
          ...


I have seen similar questions on SE, like this one Getting the image URL from a field_image on a node, but none of the answers have worked for me.

Thanks in advance for any responses.
An image field stores the file id in target_id. You can access the file id with:

{{ node.field_main_image.target_id }}


There is a second property in the image field. It is for the referenced entity, in this case the file object. This is not visible in the debug output, because it is computed:

{{ node.field_main_image.entity }}


In the file object you find the field uri

{{ node.field_main_image.entity.uri.value }}


which you can use the get the url of the original image

{{ file_url(node.field_main_image.entity.uri.value) }}


or the url of an image style

{{ node.field_main_image.entity.uri.value | image_style('thumbnail') }}


The filter for the image style is part of this module which you have to install:

https://www.drupal.org/project/twig_tweak