How to show an image in an image style

Question

I'm creating a custom twig for my node 1, as node--1.twig.html.

In this I'm showing the image uploaded in the node as

<div class="diversity-image">
    {{ set image = content.field_main_image|merge({'#style_name': 'header_image'}) }}
    {{ image }}
</div>

But it is not giving me the image of that image style, header_image.

How do I do that in twig?

Answer 1

In twig you can only merge the top level of an array. So you need two steps, first get the image from the content array and then overwrite #image_style.

node.html.twig

{% set image = content.field_image.0 %}
{% set image = image|merge({'#image_style': 'thumbnail'}) %}

You can now display the image a second time in the changed image style:

{{ image }}

Answer 2

In twig, we can get the path -

<img src="{{ node.FIELD-IMAGE-NAME.entity.uri.value | image_style('news_image_full_width') }}" alt="">