How to get uri image url in Drupal 8 template

Question

I am trying to create my own image field formatter. I followed these instructions ( http://www.sitepoint.com/creating-custom-field-formatters-drupal-8/ ), and now I have a working formatter that basically does nothing but “inherit” and runs the default image formatter.

Then, of course, I have my own template, which is also a copy of the default image-formatter.html.twig template (found in core \ modules \ image \ templates).

Now I have a question that in the template I can print the entire image using Twig {{image}} syntax. If I use dump (image), I see that actually the uri image looks like this: public: // default_images / Default image for Drupal Ant task.jpg

I would like for me to have a real url, but right now I have no idea how to get it. Is it possible? And I would also appreciate if you could explain briefly to me why {{image}} prints the image using img tags? Should it go through another formatter?

Why I started doing this in the first place was that instead of img tags I would like to use divs with a background.

Answer 1

There is a twig file_url extension that you can use to do this, for example

{{ file_url(content.field_image['#items'].entity.uri.value) }}