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 Apr 16 '16 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 Apr 16 '16 at 11:21

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, privacy policy and cookie policy

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