Image URL formatter does not work with theme_debug

This is an issue in D7 as well since theme_debug was backported and not something I think this module can fix.

Have you tried using the striptags to filter your twig template?

<header class="main-header author-head " style="background-image: url({{ field_image|striptags|trim }})"></header>

I have the same problem as @darol100 — and unfortunately the striptags filter does not work for me. In fact, when applied, the field does not print whatsoever. The striptags filter does work on other variables, however.

While disabling twig debugging resolves the issue, it is annoying for the theme to "break" during development.

Any other ideas?

This is what ended up working for me in my html.twig file:

{%
  set background_image = content.field_name|e|striptags|trim
%}

<div style="background-image: url( {{ background_image }} );"></div>

thanks @ kccmcck

For me the same solution worked during development:

Inside my views-view-fields--slider.html.twig im using your solution successful with twig debug enabled:

{%
set background_image = fields.field_photo.content|striptags|trim
%}
<div class="slide-image" style="background-image: url({{ background_image }});"></div>

When using Image URL Formatter as the source and I have theme debug on, the printing of the img breaks.

<div class="col-sm-4">
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'views_view_field' -->
<!-- BEGIN OUTPUT from 'core/themes/stable/templates/views/views-view-field.html.twig' -->
<img>
/lawn-needs-be-mowed-weed-whacked
" class="img-responsive"&gt;
<!-- END OUTPUT from 'core/themes/stable/templates/views/views-view-field.html.twig' -->
</div>

Steps to reproduce

1. Views > Content:Image field
2. Formatter: Image URL
3. URL Type: Full URL
4. Image Style: None
5. Link image to: content
6. Rewrite results: Override the output of this field with custom text:
7. <img src="{{ field_image }}" class="img-responsive">
8. enable twig debug
9. clear cache
10. view page and source to see results