I'm working with Drupal 8 and twig

I created a Drupal content type called hero. It contains a title, body copy and an image. I'm overwriting node.html.twig for this content type but am having trouble accessing the image source to generate html I need to.

<div {{ attributes.addClass(classes) }} style="background-image: url(/img/site/about/about_hero_banner.jpg);">
      <div class="row">
        <div class="col-sm-7">
          <div class="copy">
              Subhead Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, sed voluptatum fugit ipsa animi quos nobis?

I can access the Headline and title with the code below but I don't want to load the image file I want only want the image path (source).

{{ content.body }}
{{ content.field_headline }}
{{ content.field_hero_image }}

How do I get the image file path from in my node template from {{ content.field_hero_image }}? How do I access the attributes of content.field_hero_image?

I've looked at image.html.twig and see

<img{{ attributes }} />

So I know it's in the attributes, but don't know how to access the attributes from the node template.

  • 1
    Possible duplicate of Static resource URL in Drupal 8 theme
    – ya.teck
    Commented Apr 16, 2016 at 4:40
  • Thanks for the link, but this question is actually different. It's looking for the image src in a node template. I posted an answered below.
    – leif
    Commented Apr 16, 2016 at 11:21

1 Answer 1


Ok, after writing this question a similar one showed up and I think I found the solution:

{{ file_url(node.field_hero_image.entity.fileuri) }}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.