The basic plan:
{% set imagePath = 'public://images/default.jpg' %}
{% set responsiveimagestyle = {
'#theme': 'responsive_image',
'#responsive_image_style_id': 'my_responsive_image_style_id',
'#uri': imagePath,
'#alt': 'my alt text',
'#attributes': { class: 'img-responsive', alt: 'my alt text' },
} %}
{{ responsiveimagestyle }}
Note: You need to get the URL for your image from the media entity
Example in use:
{% set responsiveImage = {
'#theme': 'responsive_image',
'#responsive_image_style_id': '16_9_half_width',
'#uri': node.field_image
`.entity.field_media_image.entity.uri.value,`
'#alt': node.field_image.entity.field_media_image.alt,
'#attributes': {
class: 'card__image',
alt: node.field_image.entity.field_media_image.alt,
itemprop: 'url contentUrl',
loading: 'lazy'
}
} %}
{{ responsiveImage }}