It turns out that my nodes (migrated from Drupal 7) had langcode set to "und" while flippy was explicitly looking for system default langcode ("en") in my case. Once I changed langcode on my content to "en", it worked properly.
stretta:flippy kanthan$ ddev drush sql:query "SELECT DISTINCT langcode FROM node_field_data WHERE type = 'node_gallery_item';"
und
stretta:flippy kanthan$ ddev drush sql:query "UPDATE node_field_data SET langcode = 'en' WHERE type = 'node_gallery_item';"
stretta:flippy kanthan$ ddev drush cr
[success] Cache rebuild complete.
stretta:flippy kanthan$ ddev drush sql:query "SELECT DISTINCT langcode FROM node_field_data WHERE type = 'node_gallery_item';"
en
Doesn't really count as a bug in my book; just needs to be documented as a gotcha.
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 %}