TYPO3 <f:image /> 嵌套 viewhelper 或以某种方式使用处理后的图像进行延迟加载

Question

我试图用一个特定的滑块暗示延迟加载，它要求输入图像的 src 两次，一次作为 src，第二次作为 data-lazy，如下所示：

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

with <f:image /> 我可以使用 data="{lazy: 'domain.com/image.png'}" 并且应该重复使用 viewhelper 创建的图像的 src ... (typo3 documentation and the inline use of 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

Answer 1

试试这个

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

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

Answer 2

在循环中：

<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>

TYPO3 <f:image /> 嵌套 viewhelper 或以某种方式使用处理后的图像进行延迟加载

TYPO3 <f:image /> nest viewhelper or use the processed image somehow for lazyload

typo3

fluid

viewhelper

typo3-7.6.x