如果將TYPO3 Fluid FAL圖像顯示為背景圖像，則會得到錯誤的路徑

Question

嗨，我正在使用FluidTYPO3和最新的TYPO3 Core 7.6和Flux / 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丟失了，但是它如何工作？ 我不知道..謝謝您的幫助。

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參數，可以將其省略。