How to get a Drupal image style URL from a media field in a twig template

Retrieving the image URL from an image field in Drupal 8 and 9 seemed pretty straightforward too. Even the solution for getting the image style URL from a simple image field can be found quite easily. Getting the image URL from a media field can also be looked up easily.

In case, if an image displays as a media with display mode:

{% if content.field_media|field_value is not empty %}
  {% set image_url = file_url(content.field_media[0]['#item'].entity.uri.value|image_style('inline_media')) %}
  {% set image_title = content.field_media[0]['#item'].title %}
  {% set image_alt = content.field_media[0]['#item'].alt %}
  {% if image_url %}
    <div class="media">
      <img alt="{{ image_alt }}" title="{{ image_title }}" src="{{ image_url }}" class="contact-info__image"/>
    </div>
  {% endif %}
{% endif %}

In case, if an image displays as a thumbnail:

{% if content.field_media|field_value is not empty %}
  {% set file_url = file_url(content.field_media['#object'].field_image.entity.uri.value|image_style('inline_media')) %}
  {% set file_alt = content.field_media['#object'].field_image.alt %}
  {% set file_title = content.field_media['#object'].field_image.title %}
  {% if image_url %}
    <div class="media">
      <img alt="{{ image_alt }}" title="{{ image_title }}" src="{{ image_url }}" class="contact-info__image"/>
    </div>
  {% endif %}
{% endif %}

In case, if an image displays as a media with display mode:

{% if content.field_media|field_value is not empty %}
  {% set image_url = file_url(content.field_media[0]['#item'].entity.uri.value|image_style('inline_media')) %}
  {% set image_title = content.field_media[0]['#item'].title %}
  {% set image_alt = content.field_media[0]['#item'].alt %}
  {% if image_url %}
    <div class="media">
      <img alt="{{ image_alt }}" title="{{ image_title }}" src="{{ image_url }}" class="contact-info__image"/>
    </div>
  {% endif %}
{% endif %}

In case, if an image displays as a thumbnail:

{% if content.field_media|field_value is not empty %}
  {% set file_url = file_url(content.field_media['#object'].field_image.entity.uri.value|image_style('inline_media')) %}
  {% set file_alt = content.field_media['#object'].field_image.alt %}
  {% set file_title = content.field_media['#object'].field_image.title %}
  {% if image_url %}
    <div class="media">
      <img alt="{{ image_alt }}" title="{{ image_title }}" src="{{ image_url }}" class="contact-info__image"/>
    </div>
  {% endif %}
{% endif %}

Media reference field in Drupal 9

Sometimes it may be useful to access the raw URI or file URL of an image uploaded using a Media reference field in Drupal 8.

You may require the URL for the image file rather than wanting Drupal to render the image and surrounding HTML markup with it.

To accomplish this in a custom block template using Twig, simply use the following syntax, replacing the field name with your custom Media field machine name:

{% if content.field_custom_image|render is not empty %}
  {{ file_url(content.field_custom_image.entity.field_media_image.entity.fileuri) }}
{% endif %}

Update August 2019: As of Drupal 8.7, the above syntax no longer produces the desired result. For Drupal 8.7 and above, rendering the file URL of a Media image field should be accomplished as below:

{% if content.field_custom_image|render is not empty %}
  {{ file_url(content.field_custom_image[0]['#media'].field_media_image.entity.uri.value) }}
{% endif %}

Be sure to replace the bold text in the code snippet above with the machine name of your Media image field.

This code works great if you're using a Media field type in a custom block! It's perfect for printing the specific file URI of the media file.

But what if you're using Drupal's native 'Image' field type?

In this case, you'll actually have to use a slightly different syntax, as the one above only works for Media field types. If you're looking to pull a file URI for an Image field in a custom block template in Drupal 8, you'll need to use the following syntax instead:

{% if content.field_custom_image|render is not empty %}
  {{ file_url(content.field_custom_image.0['#item'].entity.uri.value) }}
{% endif%}