Typo3 键入3使页面资源图像响应

我有一个TYPO3网站，我正在从Ressource Media页面加载英雄图像。在后端，我有三个CropVariant（台式机、平板电脑、移动设备）。Cropped图像正在保存和处理中，因此我可以在“已处理”文件夹中找到它们。我的问题是，我无法找到一种方法来显示基于我的三种作物的图像作为响应图像。因此，如果访客使用移动电话，则应显示移动农作物等

我尝试将属性“layoutKey=picture”添加到IMAGE对象，但没有成功。我也没有在网上找到任何东西

这是TCEFORM.typoscript中的代码，它在后端创建CropVariant

TCEFORM.sys_file_reference.crop.config.cropVariants {

        desktop {
            title = Desktop
            selectedRatio = 1:1
            allowedAspectRatios {
                1:1 {
                title = 1:1
                value = 1.0
                }

                4:3 {
                title = 4:3
                value = 1.3333333333333333
                }

                16:9 {
                title = 16:9
                value = 1.7777777777777777
                }

                NaN {
                title = Frei
                value = 0.0
                }
            }
        }
        tablet {
            title = Tablet
            selectedRatio = 1:1
            allowedAspectRatios {
                1:1 {
                title = 1:1
                value = 1.0
                }

                4:3 {
                title = 4:3
                value = 1.3333333333333333
                }

                16:9 {
                title = 16:9
                value = 1.7777777777777777
                }

                NaN {
                title = Frei
                value = 0.0
                }
            }
        }
        mobile {
            title = Mobil
            selectedRatio = 1:1
            allowedAspectRatios {
                1:1 {
                title = 1:1
                value = 1.0
                }

                4:3 {
                title = 4:3
                value = 1.3333333333333333
                }

                NaN {
                title = Frei
                value = 0.0
                }
            }
        }
    }

要在Header.html部分中加载图像，我使用以下ViewHelper：

<f:cObject typoscriptObjectPath="lib.headerImage" />

---

我需要一种使用打字脚本或ViewHelper创建HTML srcset的方法，以便浏览器根据用户设备显示正确的cropvariant。

当您使用流体样式的内容时，请尝试覆盖部分图像 web/typo3/sysext/fluid\u styled\u content/Resources/Private/Partials/Media/Rendering/Image.html 在模板变量中，您可以使用src集构建自己的自定义映像

lib.headerImage = IMAGE
lib.headerImage {
  file {
    import.data = levelmedia:-1, slide
    treatIdAsReference = 1
    import.listNum = 0
  }
}