TYPO3流体のFAL画像が背景画像として表示される場合は、間違ったパスになる

Question

こんにちは、私はFluidTYPO3と最新のTYPO3 Core 7.6とFlux/Fluid Extensionsで作業しています。今、私は次のスニペット（各obsoletある/のために、私は1つの画像だけを持っている）とフロントエンドでの私のイメージを表示することができ

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

：

は私がFAL-関係を使用しています

<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>タグ内の画像と基本的に同じことをする必要があります。画像URLをレンダリングするには、ViewHelperを使用します。この場合、その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パラメータが必要な場合はわからない：それは次のようになります。これは、インライン表記でそれを使用することも役に立ちます。