How to display Media image with alt attribute in paragraph twig template

Question

I'm trying to access alt attribute as in given example Get Media Image URL in Paragraphs Twig Template - Drupal 8

But there is an example how to access alt and title...

That's easy, too. You should use the following syntax, switching out the bold for the machine name of your image field: {{ content.field_custom_image['#items'].alt }}

this is not worked for me

Answer 1

Digging in Twig certainly works, though it does have limitations (such as translation support).

If you need custom output, you could try:

function getMediaFieldImage($mediaField = NULL, $imageStyle = NULL) {

  if ($mediaField && $mediaField->entity) {

    $langcode = \Drupal::languageManager()->getCurrentLanguage()->getId();

    // Get image.
    $mediaImage = $mediaField->entity
      ->get('field_media_image');

    // Check for translation.
    if ($mediaField->entity->hasTranslation($langcode)) {

      // Get translated image field.
      $mediaImage = $mediaField->entity->getTranslation($langcode)->get('field_media_image');
    }

    // Get image attributes.
    $alt = $mediaImage->alt;
    $width = $mediaImage->width;
    $height = $mediaImage->height;
    $title = $mediaImage->title;

    // Get image entity.
    $mediaImageEntity = $mediaImage->entity;

    // Get image mime type.
    $mediaImageMimeType = $mediaImageEntity->getMimeType();

    // Get image file URI.
    $mediaImageEntityUri = $mediaImageEntity->getFileUri();

    // Set image URL.
    $url = \Drupal::service('file_url_generator')->generateString($mediaImageEntityUri);

    // Set image style URL if not .svg.
    if ($imageStyle && $mediaImageMimeType !== "image/svg+xml") {
      $url = \Drupal::service('entity_type.manager')
        ->getStorage('image_style')
        ->load($imageStyle)
        ->buildUrl($mediaImageEntityUri);
    }

    return [
      'url' => $url,
      'alt' => $alt,
      'width' => $width,
      'height' => $height,
      'mimeType' => $mediaImageMimeType,
      'title' => $title,
    ];
  }

  return NULL;
}

Set it like:

function MYTHEME_preprocess_paragraph(&$variables) {
  $variables['mediaImage'] = getMediaFieldImage($paragraph->get('field_name'), 'medium');
}

And in Twig:

<img src="{{ mediaImage.url }}" width="{{ mediaImage.width }}" height="{{ mediaImage.height }}" alt="{{ mediaImage.alt }}" />

Answer 2

I have worked out this i have access to alt in my case its:

 {% if paragraph.field_media_image is not empty %}
    <img src="{{
      file_url(
        paragraph.field_media_image.entity.field_media_image.entity.fileuri
      )
      }}"
      alt="{{
      content.field_media_image[0]['#media'].field_media_image[0].alt
      }}" />
  {% endif %}

So solution is:

{{ content.field_media_image[0]['#media'].field_media_image[0].alt }}