如何在Twig模板中渲染字段集合的媒体图片字段？

实体引用类型的媒体图片字段和文本字段的输出逻辑不一样——文本字段直接取.value就能拿到内容，但媒体字段是引用到媒体实体，得先拿到对应的媒体实体，再从媒体实体里提取图片信息。

一、输出图片URL #

先获取引用的媒体实体，再从媒体实体的图片字段（通常是field_media_image，如果你的媒体类型用了其他字段名，替换成对应名称）里拿到文件URI，最后生成可访问的URL：

{# 获取字段集合里的媒体引用实体 #}
{% set media_entity = item.content['#field_collection_item'].field_thumbnail_client.entity %}
{# 从媒体实体中获取图片文件实体 #}
{% set image_file = media_entity.field_media_image.entity %}
{# 生成图片的公开访问URL #}
{% set image_url = file_url(image_file.uri.value) %}

{# 输出URL #}
{{ image_url }}

二、输出渲染好的图片（带<img>标签） #

方法1：直接用Drupal的视图格式化渲染字段

这种方式会自动套用你在后台配置的图片样式：

{{ item.content['#field_collection_item'].field_thumbnail_client|view }}

方法2：手动构建<img>标签（更灵活）

结合上面的URL逻辑，自定义图片的alt和样式：

{% set media_entity = item.content['#field_collection_item'].field_thumbnail_client.entity %}
{# 加判断避免空值报错 #}
{% if media_entity and media_entity.field_media_image %}
  {% set image_file = media_entity.field_media_image.entity %}
  {% set image_url = file_url(image_file.uri.value) %}
  <img src="{{ image_url }}" alt="{{ media_entity.name.value }}" class="your-custom-class" />
{% endif %}

注意事项 #

• 如果你的媒体类型里的图片字段不是field_media_image，要替换成实际的字段名称；
• 加上空值判断可以避免字段为空时出现页面报错。

内容的提问来源于stack exchange，提问作者MiltonMethod