I need to have an easily exposed to user background image in an aera (header). So i made a custom block with an image field and i want to use this picture in a classical <div style="background.... So I need the URL of the file and of course not the rendered file.

Since two days i'm searching a way to do that without success. And twig debug activated do not help. I'v tried the image_url_formatter module (doesn't work with twig debug active) I've found this:

{{ file_url(content.field_header_background['#items'].entity.uri.getValue()) }} 

But it only giving me the root folder (by de file_url function i think) the part:


is empty.

I have heard about preprocess function (on block, filed ?) but i don't know how to do it.

Is anyone can help me ?

  • getValue() is not working, it returns an array. Try .value or the code in the duplicate question. – 4k4 Feb 8 '19 at 17:56
  • Finally the problem was at the data source. When i've created the block i gave a default source image and didn't add another one. So when i was rendering simply the field in twig {{content.field_header_background }} The default image was rendered. But when i tried to acces to url source by {{ file_url(content.field_header_background['#items'].entity.uri.value) }} i was having only the root path and nothing behind so i was thinking this doesn't working. But as soon i'v added an picture in the field it worked. The default image url seems to use a different way. – smeys Feb 9 '19 at 10:18

Browse other questions tagged or ask your own question.