如果我将 TYPO3 Fluid FAL 图像显示为背景图像，则其路径错误

Question

您好，我正在使用 FluidTYPO3 和最新的 TYPO3 Core 7.6 和 Flux/Fluid Extensions。

我正在使用 FAL 关系：

<flux:field.inline.fal name="backgroundimage" minItems="1" maxItems="1" />

现在我可以使用以下 sn-p 在前端显示我的图片（for/each 已过时，我只有一张图片）：

<f:for each="{v:content.resources.fal(field: 'backgroundimage')}" as="image">
    <f:image treatIdAsReference="1" src="{image.id}" alt=""/><br/>
</f:for>

图像会像<img src="fileadmin/user_upload/.."一样渲染

但我需要我的图片作为背景图片，所以我尝试了：

<f:for each="{v:content.resources.fal(field: 'backgroundimage')}" as="image">
 <div class="back" style="background-image: url('{image.id}');"></div>
</f:for>

但我会得到..<div class="back" style="background-image: url('1:/Editors_English/image.jpg');"></div>

我认为treatIdAsReference 不见了，但它是如何工作的？我不知道..谢谢你的帮助。

Answer 1

您需要执行与 <img>-tag 中的图像基本相同的操作：使用 ViewHelper 为您呈现图像 URL。在这种情况下，您只需要 URL，周围没有 <img> 标记，因此您必须改用 ViewHelper f:uri.image。在内联符号中使用它也很有帮助，如下所示：

<f:for each="{v:content.resources.fal(field: 'backgroundimage')}" as="image">
  <div class="back" style="background-image: url('{f:uri.image(src: image.id, treatIdAsReference: 1)}');"></div>
</f:for>

我不确定您是否真的需要 treatIdAsReference 参数，您可以省略它。