How to get Media entity image (Entity Reference Field) URL in TWIG theme

$node = $variables['node']; $bundle = $node->bundle(); $hero_image = $node->get('field_image2')->getValue(); if (!empty($hero_image)) { $entity = Media::load($hero_image[0]['target_id']); $variables['hero_image'] = ImageStyle::load('large')->buildUrl($entity->field_image->entity->getFileUri()); } if (!$node->field_image2->isEmpty()) { $image_media_entity = $node->field_image2->entity; $media_mime_type = $image_media_entity->field_mime_type; $media_banner_image = $image_media_entity; $variables['banner_image'] = $image_media_entity->url(); // [ // '#type' => $media_banner_image->type, // '#theme' => $media_banner_image->theme, // '#langcode' => $media_mime_type->getLangcode(), // ]; // Caption is formatted text, so we must output a render array that will // process the text with the appropriate filter. $variables['mime_type'] = [ '#type' => 'processed_text', '#text' => $media_mime_type->value, '#format' => $media_mime_type->format, '#langcode' => $media_mime_type->getLangcode(), ]; }

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

First commit to issue fork.

Comment about 1 year ago →

🇺🇦Ukraine seorusus Kyiv

In my case I 've got media url here
media_entity = content.field_hero_background.0['#media']
then
image_uri = media_entity.field_media_image.entity.fileuri
The completed code is

    {% if content.field_hero_background.0['#media'] %}
        {% set media_entity = content.field_hero_background.0['#media'] %}
        {% set image_uri = media_entity.field_media_image.entity.fileuri %}
        <div class="parallax__layer parallax__layer--back" style="background-image: url('{{ file_url(image_uri) }}');">
        </div>
    {% endif %}

Comment about 1 year ago →

🇺🇸United States x_v

And if you want to apply an image style, you can simply add
|image_style('640x360')

For example:

{% set media_entity = content.field_media.0['#media'] %}
{% set image_uri = media_entity.field_media_image.entity.fileuri|image_style('640x360') %}

Comment 9 months ago →

🇿🇦South Africa kanthan

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 %}

Comment 8 months ago →
🇮🇳India garglalit0
this will work in drupal 9 too get the image url

$image = $node->get('field_image_name')->getValue()[0]['target_id'];
$image = \Drupal::entityTypeManager()->getStorage('file')->load($image)->getFileUri();
$image_url = \Drupal::service('file_url_generator')->generateAbsoluteString($image);