How to get image url from uri in Drupal 8 template

Question

I'm trying to create my own image field formatter. I've followed these instructions (http://www.sitepoint.com/creating-custom-field-formatters-drupal-8/) and right now I have a working formatter which basically does nothing but "inherits" and executes default image formatter.

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

Now my question is that in template I can print the whole image using Twig syntax {{ image }}. If I use dump(image) I see there's actually image uri like this: public://default_images/Default image for Drupal Ant task.jpg

I'd love to have the actual url instead but right now I have no idea how to get it. Is it even possible? And I would also appreciate if you could explain me shortly why {{ image }} prints image with img tags? It must go through another formatter?

Why I started to do this in a first place was that instead of img tags I'd like to use divs with background image style.

Answer 1

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

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