How to get an image URL from a field in a twig template

Question

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

Answer 1

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

Different entity template

If you don't have a node but a different entity type, for example a paragraph, replace node with the entity name:

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

Custom block content

If the field is in a block content type there is no entity template available. The block template is for the configured block plugin, which has a different variable structure. In this case, you find the content entity here

{% set block_content = elements.content['#block_content'] %}

and then

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

Answer 2

You cannot get image url directly in twig template as image fields have just image file id. Every image in Drupal 8 is a file entity.

You can try in template_preprocess_node():

$image_file_id = $variables['node']->field_image[0]->target_id;
$image_file = \Drupal\file\Entity\File::load($image_file_id);
$uri = $image_file->uri->value;
$variables['url']=file_create_url($uri);

Answer 3

<article{{ attributes.addClass(classes) }}>
<div>
    <img src="{{ file_url(node.field_image.entity.uri.value) }}">
</div>
<div{{ content_attributes.addClass('content') }}>
    {{ content|without('field_image') }}
</div>

1. {{ file_url(node.field_image.entity.uri.value) }}

By this you can get the image field of node in twig template.

2. {{ content|without('field_image') }}

By this you will get the contents without node image field.