Получить URL-адрес изображения

Просто упомяну, что если вы хотите сделать то же самое в одном из новых пользовательских блоков, это работает:

{{ file_url(content.field_image['#items'].entity.uri.value) }}

Я использую этот код в своем файле .theme:

function THEMENAME_preprocess_node(&$variables) {

  if ($variables['node']->field_image->entity) {
      $variables['image_url'] = $url = entity_load('image_style', 'medium')->buildUrl($variables['node']->field_image->entity->getFileUri());
  }
}

Это можно было бы улучшить. Я проверяю поле изображения и загружаю его URL-адрес со стилем изображения.

Затем в моем файле node-page.html.twig у меня есть это:

{% if image_url is not empty %}
    <div class="featured-thumb">
        <img src="{{ image_url }}"/>
    </div>
{% endif %}

<div>{{ content.body|without('field_image') }}</div>

Опять же, это можно было бы улучшить. спасибо

Я бы сделал это по-другому. В функции предварительной обработки вашего узла:

use Drupal\image\Entity\ImageStyle; // Don't forget this use.

function THEMENAME_preprocess_node__NODETYPE(&$variables){
    $node = $variables['node'];

    if(isset($node->get('field_image')->entity)){
        $image_style = 'large'; // Or whatever your image style's machine name is.
        $style = ImageStyle::load($style);
        $variables['image'] = $style->buildUrl($node->get('field_image')->entity->getFileUri()); // Generates file url.
    }
}

Затем в вашем шаблоне (node--NODETYPE.html.twig) просто отобразите изображение таким образом:

{% if image %}
    <img src="{{ image }}" />
{% endif %}

Хотя, если вам когда-нибудь придется отрисовывать большое количество изображений, я бы посоветовал вам загрузить стили в массив перед циклом на каждом изображении. Я говорю это, потому что у меня возникли серьезные проблемы со временем загрузки, потому что мне пришлось загрузить более 300 изображений, и для каждого изображения я загружал стиль по отдельности о загрузке их всех раньше, вот пример, та же база, что и выше:

use Drupal\image\Entity\ImageStyle; // Don't forget this use.

function THEMENAME_preprocess_node__NODETYPE(&$variables){
    $node = $variables['node'];

    if(isset(node->get('field_images')[0]->entity)){ // Notice how, this time, I check if the FIRST image is set (if it's true, then u'll allow the loop for at least 1 element)
        $images_styles = [
            'large' => ImageStyle::load('large'),
            'thumbnail' => ImageStyle::load('thumbnail')
        ];
        $count = 0;

        foreach($node->get('field_images') as $image){
            $variables['images'][$count]['large'] = $images_styles['large']->buildUrl($image->getFileUri());
            $variables['images'][$count]['thumbnail'] = $images_styles['thumbnail']->buildUrl($image->getFileUri());
            $count++;
        }
    }
}

Затем снова, в вашем шаблоне (node--NODETYPE.html.twig), просто отобразите изображения таким образом:

{% if images %}
    <ul>
        {% for image in images %}
            <li>
                <img src="{{ image.large }}" /> // Large image url.
                <img src="{{ image.thumbnail }}" /> // Thumbnail image url.
            </li>   
        {% endfor %}
    </ul>
{% endif %}

Я на самом деле не тестировал это, и я выкидываю все это из головы, поэтому в нем могут содержаться ошибки, не стесняйтесь предупреждать меня, чтобы я исправил это:-).

Потратив два дня, я нашел ответ на свой аналогичный код. С включением и исключением некоторых полей.

{%
set classes = [
'block',
'block-' ~ configuration.provider|clean_class,
'block-' ~ plugin_id|clean_class,
'cover-image',
]
%}

{% set background_image = file_url(content.field_banner_image['#items'].entity.uri.value) %}

<div{{ attributes.addClass(classes) }} style="background-image: 
url({{background_image}})">

<div class="block-inner">
{{ title_prefix }}
{% if label %}
<h2{{ title_attributes }}>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
{% block content %}
{{ content.field_media_image }}
<div class="summary">
{{ content|without('field_banner_image') }}
</div>
{% endblock %}
</div>
</div>

Прекрасное имя в блоке темы --bundle--banner-block.html.twig Этот код предназначен для пользовательского блока с изображениями.

Еще один пример для простого файла. не перебираю весь код целиком, а только самое необходимое.

<a href="{{file_url(node.field_attachment1.entity.uri.value)  }}" ><h3> 
{{content.field_short_information}} </h3></a>

Эти фрагменты кода для узла node--all_notice.html.twig. Все, что в настоящее время работает в drupal 8.8.3

Я добился некоторого успеха, используя модуль фонового изображения , когда это позволяет вариант использования. Я использую один из этих вариантов кода, когда мне нужна настроенная структура DOM.