Drupal render images example

Some example code to render a Drupal image field in different ways.

use Drupal\Core\Field\FieldDefinitionInterface;
use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Field\Plugin\Field\FieldFormatter\EntityReferenceFormatterBase;
use Drupal\image\Entity\ImageStyle;
use Drupal\Core\Cache\Cache;

  public function viewElements(FieldItemListInterface $items, $langcode) {
    $elements = [];

    foreach ($this->getEntitiesToView($items, $langcode) as $delta => $entity) {
      $url = $entity->toUrl();
      $link = $entity->toLink($entity->label());
      $link_string = $link->toString();

      $image_field_item = $entity->get('field_image')->first();
      $image_entity = $image_field_item->entity;
      $image_uri = $image_entity->getFileUri();

      $image_style = ImageStyle::load('icon');
      $styled_image_url = $image_style->buildUrl($image_uri);
      $styled_image_uri = $image_style->buildUri($image_uri);

      $term_page_url = $entity->toUrl()->toString();
      $term_label = $entity->label();

      $cache_tags = $image_style->getCacheTags();
      $cache_tags = Cache::mergeTags($cache_tags, $image_entity->getCacheTags());
      $cache_tags = Cache::mergeTags($cache_tags, $entity->getCacheTags());

      debug($cache_tags);

      // Responsive image render array.
      $image_render_array_responsive = [
        '#type' => 'responsive_image',
        '#theme' => 'image',
        '#uri' => $styled_image_uri,
        '#cache' => [
          'tags' => $cache_tags,
        ],
      ];
      $elements[$delta]['responsive_image_render_array'] = [
        '#type' => 'inline_template',
        '#template' => '{{ image_render_array_responsive }}<span">{{ link }}</span>',
        '#context' => [
          'image_render_array_responsive' => $image_render_array_responsive,
          'link' => $link,
        ],
        '#prefix' => '<p>Responsive image element:</p>',
      ];

      // Inline template ok.
      $image_render_array = [
        '#theme' => 'image_formatter',
        '#item' => $image_field_item,
        '#image_style' => 'icon',
        '#url' => $url,
        '#cache' => [
          'tags' => $cache_tags,
        ],
      ];
      $elements[$delta]['theme_render_array'] = [
        '#type' => 'inline_template',
        '#template' => '{{ image_render_array }}<span>{{ link }}</span>',
        '#context' => [
          'image_render_array' => $image_render_array,
          'link' => $link,
        ],
        '#prefix' => '<p>inline template goed</p>',
      ];

      // Inline template D7.
      $elements[$delta]['inline_template_render_array'] = [
        '#type' => 'inline_template',
        '#template' => '<div"><a href="{{term_page_url}}"><img src="{{image_url}}" \></a><span class="">' . $link_string . '</span></div>',
        '#context' => [
          'term_page_url' => $term_page_url,
          'image_url' => $styled_image_url,
          'term_label' => $term_label,
        ],
        '#cache' => [
          'tags' => $cache_tags,
        ],
        '#prefix' => '<p>inline template D7</p>',
      ];

      // Default view mode.
      $elements[$delta]['default_view_mode'] = $entity->get('field_image')->view('default');
      $elements[$delta]['default_view_mode']['#prefix'] = '<p>Default view mode</p>';
    }

    return $elements;
  }