Attempt to get Image URL in D8 Twig

Question

Background:
Created a custom views block to use unformatted view showing fields set under 'Format'.
Also, created an override template as views-view-fields--bookstheme--block.html.twig and then created the HTML structure within this custom template and then I am simply printing the field like for example Eg:- {{ fields.booktitle.content}}

Below is attempt within to get the image field URL.

Observation:
Solution Attempt #1 worked for me and Solution Attempt #2 didnt. Request help on what I missed out.

Solution Attempt #1: [ Works ]

{# Below image field from view o/p #}  
{{ fields.field_books_theme_pic.content }}  
{# Creating a Field URI post setting up relationship to image field fields.uri.content gives uri format eg:- public://image.jpg #}  
{{ fields.uri.content|striptags|trim }}  
{# and this gives the image uri for src ref #}  
{{ file_url(fields.uri.content|striptags|trim) }} 

Solution Attempt #2 [ Something missing, no output ]

{% set url = fields.field_books_theme_pic.content|render|striptags %}  
{{ url }}  

Answer 1

{% set url = file_url(content.field_books_theme_pic['#items'].entity.uri.value) %}

"file_url" needs a URI to convert.

Another options is to go to that fields display settings and change the display option from image to "URL to image". Then you can just render the field value:

{{ content.field_books_theme_pic }}

If you are working in twig template files, the only thing that changes is context. content.something, fields.something, paragraph.something...

If this is a field of type image, what you are looking for is the array key "URI".

I always use {{ dump(whatever | keys) }}. For your case try pasting this into your twig file:

{{ dump(fields.field_books_theme_pic | keys) }}

and see if you can trace down to the uri key (you must have devel enabled and the usual config in local files). If you cant find the uri key in your current setup via the twig template file, then you know you probably need to do some preprocessing to make it available to your template.

Personally, if I feel I need granular markup I would go after the field template itself: "field--field-name.html.twig" for example, and control my markup there. That way, whether I use that field in a view, or a content type, or anywhere, it will always render the same. Plus all I have to do then is print that field in other template files to get the same results.

Answer 2

In the view you created, select URL to image as image formatter.

Then, in the view template file, you will be able to access the image URL with code similar to the following one.

<img class="img-fluid" src="{{ fields.field_cover_photo.content }}" alt="test">

field_cover_photo is the field machine name, in my case.