Php 在Drupal8视图中，如何将图像字段的输出重写为以该图像为背景图像的div？

我有一个视图来显示包含图像字段的内容，我需要将此图像显示为div的背景图像，以便在其上应用一些CSS

我试图用twig重写此字段的输出，如下所示：

<div class="page-image" style="background-image: url({{ field_image }});">
</div>

<div class="page-image">
</div>

问题是Drupal会剥离样式属性，因此输出如下：

<div class="page-image" style="background-image: url({{ field_image }});">
</div>

<div class="page-image">
</div>

在D7中，我曾经通过覆盖特定字段的模板来解决此类问题，但我无法确定D8中所需模板的名称。当我启用twig debug时，发现该字段使用的是模板文件

views view field.html.twig

，这是视图中所有字段的默认模板，但我在该视图中找不到该特定字段所需的模板名称

---

有什么建议吗？

我也开始了D8的开发，并且正在研究视图模板是如何工作的

您可以将/core/modules/views/templates/views-view-field.html.twig复制到主题目录中，并使用以下约定命名模板

视图视图字段--文章-[view machine name]-[view display id].html.twig

style="background-image: url('{{ hero_background_image_url }}')

---

读了这篇文章后，我知道这一点非常有用。

下面是我正在使用的预处理器解决方案：

在我的.theme文件中，我有：

function THEMENAME_preprocess_page(&$variables) {

    if ($node = \Drupal::request()->attributes->get('node')) {
        if ($node->field_hero_background_image->entity) {
            $variables['hero_background_image_url'] = file_create_url($node->field_hero_background_image->entity->getFileUri());
        }
    }
}

然后在我的page.html.twig中

style="background-image: url('{{ hero_background_image_url }}')

---

您还可以使用“blazy”（）来显示图像。在视图中，有一个选项可以将blazy图像显示为背景图像。因此，您不必更改所有图像的常规方式。

效果很好，要在节点模板中获取变量，只需将函数更改为“THEMENAME_preprocess_node（&$variables）'）。没有理由在此处使用THEMENAME_preprocess_页面，最好更精确（如中所示，尽可能精确）。原因是表演。。。页面版本在每个页面上运行，无论它是否是节点。使用mename_preprocess_节点并使用$node=$variables['node']获取已加载的节点；