如何将通过image_style渲染的非托管图片转为带链接的区块元素？

很简单！你只需要把现有的图片渲染数组嵌套到一个link类型的渲染数组里，就能轻松给图片加上指定的URL链接了。

具体实现代码 #

// 先定义你要跳转的目标URL，可以是字符串路径，也可以用Drupal的Url对象（更推荐）
$target_url = '/your/target/path'; 
// 或者用路由生成URL（更规范，支持权限和动态参数）：
// $target_url = \Drupal\Core\Url::fromRoute('entity.node.canonical', ['node' => 123]);

// 构建带链接的图片渲染数组
$build['my_image_with_link'] = [
  '#theme' => 'link',
  '#url' => $target_url,
  '#title' => [
    // 这里就是你原来的图片渲染代码
    '#theme' => 'image_style',
    '#style_name' => 'large',
    '#uri' => $uri,
    // 记得添加alt文本，提升页面可访问性
    '#alt' => '图片的替代描述文本',
    // 可选：添加鼠标悬停时显示的title属性
    '#title' => '点击查看详情',
  ],
  // 可选：给链接添加额外属性，比如打开新窗口、自定义CSS类
  '#options' => [
    'attributes' => [
      'class' => ['custom-image-link'],
      'target' => '_blank',
      'rel' => 'noopener noreferrer', // 配合target="_blank"使用，提升安全性
    ],
  ],
];

关键说明 #

• link主题的#title字段支持接收渲染数组，所以可以直接把你原来的image_style数组嵌套进去，Drupal会自动渲染图片作为链接的内容。
• 推荐使用Url对象来生成目标链接，而不是硬编码字符串路径，这样能自动处理路由权限、语言前缀等Drupal的核心特性。
• 不要忘记添加#alt文本，这是Web可访问性的基本要求，对屏幕阅读器用户至关重要。

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