🇿🇦South Africa @kanthan

Thanks for this thread. I've run into exactly the same problem in D10.2 but fix suggested by #5 does not appear to be working. Neither does #2.

I jumped through hoops on this in D10.2.4. It seems that the actual image not in the media entity but is in a referenced file field, which contains references to file entities. To access the URL of the image, you'll need to retrieve the file entity associated with the field and then get the URL from that file entity.

Here's what finally worked for me. (My image is stored in a field called Feature Image with machine name field_feature_image):

{#  extract a url from a media field #}
            {% if node.field_feature_image | length %}
              {# Get the first item from the media field #}
              {% set media_entity = node.field_feature_image.0. entity %}
              {# Check if the referenced entity exists and has a field_media_image #}
              {% if media_entity and media_entity.field_media_image | length %}
                {# Get the file entity associated with field_media_image #}
                {% set file_entity = media_entity.field_media_image.0. entity %}
                {# Get the URL of the image #}
                {% if file_entity %}
                  {% set image_url = file_entity.uri.value %}
                  <img src="{{ file_url(image_url) }}" alt="" class="img-fluid">
                {% endif %}
              {% endif %}
            {% endif %}