0

我试图用特定的滑块暗示延迟加载,它要求输入图像的 src 两次,一次是 src,第二次是数据延迟,如下所示:

<img src="domain.com/image.png" data-lazy="domain.com/image.png">

<f:image />我可以使用并且data="{lazy: 'domain.com/image.png'}"应该重复使用 viewhelper 创建的图像的 src ...(typo3 文档和f:uri.image的内联使用)

我实际上有两个问题:

  • 我如何嵌套 f:uri.image ?这给出了一个错误<f:image src="{image.uid}" treatIdAsReference="1" data="{lazy: '{f:uri.image(src: {image.uid})}'}"/>
  • 它实际上应该是对同一图像的引用,如果我嵌套 f:uri.image 我会创建第二个渲染图像吗?(特别是因为我还设置了宽度和高度,但我想保持片段简单)

该解决方案应该适用于 TYPO3 v7 和 v8

4

2 回答 2

3

试试这个

<img src="{f:uri.image(src : image.uid)}" data-lazy="{f:uri.image(src : image.uid)}" />

您不必使用<f:image ..>标签来创建 <f:uri.image ..> 返回相同的已处理资源。

于 2017-10-31T09:59:22.007 回答
0

在循环中:

<f:for each="{MARKER}" as="file">
<img class="lazy" src=".../blank.gif" data-lazy="{f:uri.image(image: file, width:'XXXc', height:'XXXc', treatIdAsReference:1)}" alt="{file.alternative}" title="{file.title}">
</f:for>
于 2017-11-01T01:39:31.233 回答