如何在TYPO3中实现sourceCollection响应图像渲染？

我想使用sourceCollection根据TYPO3中的不同比例（介质）实现响应性图像渲染

<picture>
  <source src="fileadmin/_processed_/imagefilenamename_595cc36c48.png" 
    media="(max-device-width: 600px)" />
  <source src="fileadmin/_processed_/imagefilenamename_42fb68d642.png" 
    media="(max-device-width: 600px) AND (min-resolution: 192dpi)" />
  <img src="fileadmin/_processed_/imagefilenamename_595cc36c48.png"  alt="" />
</picture>

我可以使用渲染，但如何在我自己的扩展中使用它

---

提前感谢。

最直接的方法是使用打字稿。在下面的示例中，我们使用与我用于tt_内容的配置相同的配置来呈现新闻项

首先，您需要定义一个使用传递给对象的文件的打字脚本对象。然后复制用于tt_内容的配置

lib.responsiveImage {
    default = IMAGE
    default {
        file.import.current = 1
        altText.data = field:altText
        titleText.data = field:titleText
        layoutKey = picturefill
        layout.picturefill < tt_content.image.20.1.layout.picturefill
        sourceCollection < tt_content.image.20.1.sourceCollection
    }
}

lib.responsiveImage{
默认值=图像
违约{
file.import.current=1
altText.data=字段：altText
titleText.data=字段：titleText
layoutKey=picturefill
layout.picturefill

（如果不想使用picturefill，可能需要将示例更改为其他布局。）

然后，在流体中，将图像传递给打字脚本。下面的示例映射文件引用的uri：

<f:alias map="{image: {uri: '{f:uri.image(src:\'{mediaElement.uid}\', treatIdAsReference:\'1\')}', altText: mediaElement.originalResource.alternative, titleText: mediaElement.originalResource.title}}">
    <f:cObject typoscriptObjectPath="lib.responsiveImage.default" data="{image}" currentValueKey="uri" />
</f:alias>

您还可以定义其他配置，例如

lib.responsiveImage {
    default = IMAGE
    default {
        [...]
    }
    newsDetail < .default
    newsDetail {
        [different configuration for type newsDetail]
    }
}   

lib.responsiveImage{
默认值=图像
违约{
[...]
}
newsDetail<.default
新闻详情{
[类型newsDetail的不同配置]
}
}   

感谢Lorenz提供的解决方案，它为我提供了前进的道路。