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

Solutions

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);

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

<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.

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

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

Tags: Theming / Media

Similar questions

How can I distinguish the first image in an image field in a Twig template?
I have a custom field formatter for an image field. The Twig template for the image field is the following: Each image is then formatted by the following template: But what I want to do is to format the first image of the field in a different way. I found how I could change the for loop in the template and use loop.first to treat the first image di...
How to get the valid URL of a Link field from within a Twig template?
I have a Link field named field_my_link (machine name). Within a Twig template I can get the link's URL value with this: If inside the Link's URL there is an external URL, e.g. http://example.com it works good. But, if inside the Link's URL there is stored an internal URL, e.g. "/node/11", I get a value like this: with the "internal:" prefix. How c...
How to get the value / URL of a Link field in a Twig template?
I have a custom block Type with a Link field called "field_link" (for internal links only). Within my block Twig template I want to extract the URL of the link field. How can I do that? I read some post with similar problems, but none of the solutions seems to work so far. What I tried so far: I only get "/" but there should be "/node/1"... This is...
Get path/url/uri of Entity reference field to content in a Twig template?
I have a Entity reference field which links to internal content/node. I can get the title with {{ node.field_related_project_internal.entity.label }} But how can I get the raw path/url/uri of the linked content/node? The soloutions for a Link Field to not work here: How to get the valid URL of a Link field from within a Twig template?
How to get Media entity image (Entity Reference Field) URL in TWIG theme
Apologies if this question has already been asked. However, in my research I found the answers have been for simple image fields which are in default install of Drupal 8. However, in order to have reusable media, I am using Media Entity and associated modules. The problem is I am not able to access image or its URL in TWIG template, where simple im...
how to get uri of an image field in a views_view_list twig template using drupal 8?
I have a twig template generated from views-view-list.html.twig! Its a view uses ECK entities. I would need to access the image field of my eck entity (field_background_image) in this template, because it is necessary for the slideshow logic to display the thumbnail. I tried a lot of different ways. This is how my template looks like I can access t...

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.