1

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

我正在使用 FAL 关系：

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

现在我可以使用以下代码段在前端显示我的图像（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缺少，但它是如何工作的？我不知道..谢谢你的帮助。

4

1 回答 1

3

您需要执行与处理<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参数，您可以将其省略。

于 2016-08-05T14:27:44.040 回答