Are there alternatives to using URL to Image Formatter? We had a need to set an image as a background element for a &lt;div&gt; tag (see example below). When we tried to the following (with Image as formatter) it only returned the original image url, not the image URL based on the image style.

Without having to use preprocess hooks to modify the URL, we have set the display formatter to be "URL to Image" on the default View Mode and we get the desired results. If I want to use Image formatter, I had to write a preprocess hook, which I want to avoid and adding an additional module like twig_tweak seems over complicating it. 

Are there any other alternatives to using the URL to Image formatter and {{ content.field_image.0['#markup] }} without having to use a preprocess hook?

Example using Image formatter

{{ content.field_image.entity.uri.value }}


Results

&lt;div style="background-image: url('/sites/default/files/original-image-url.png')"&gt;&lt;/div&gt;


Example using "URL to Image" formatter

{{ content.field_image.0['#markup] }}


Results (desired results)

&lt;div style="background-image: url('/sites/default/files/styles/extra-large/public/original-image-url.png')"&gt;&lt;/div&gt;




Alternative solution 

This looks like it will get the url to image with image style. 


Set formatter as URL to Image
in twig template use {{ content.field_image.0 }}
Background Image Formatter provides a new formatter that can do this. You will probably want a unique identifier on your target div, but this module should do the trick otherwise. There's a responsive_bg_image_formatter submodule for using responsive image styles for your bg image.