TYPO3 Core

You cannot render a ProcessedFile via <f:image />

It neither works via:

<f:image image="{processedFile}" />

nor via

<f:image src="{processedFile.publicUrl}" />

Only viable workaround is:
<f:image src="{processedFile.publicUrl}" />

- Why would I want to do that at all, when ImageViewHelper creates ProcessedFiles itself?

--> Because I want to render a video list - using the online media helpers to create a video preview image, which should then be rendered as plain image:

    /** (Video domain model)
     * @return null|ProcessedFile
     */
    public function getPreviewImage(): ?ProcessedFile
    {
        if (!$this->videoFile
            || !$this->videoFile->getOriginalResource()
            || !$this->videoFile->getOriginalResource()->getOriginalFile()
        ) {
            return null;
        }

        $previewImageFile = $this->videoFile->getOriginalResource()->getOriginalFile()->process(
            ProcessedFile::CONTEXT_IMAGEPREVIEW,
            [
                'width' => 576,
                'height' => 324,
            ]
        );

        return $previewImageFile;
    }

`video` is a Video domain model.
`video.previewImage` is created via the getter above.
`video.videoFile` is a fileReference to a Vimeo online resource.

<f:for each="{container.videos}" as="video">
    <li class="video-list__video-item">
        <img src="{video.previewImage.publicUrl}" alt="{video.videoFile.title}" title="{video.videoFile.title}" />
        <span class="video-list__video-item__title">{video.videoFile.title}</span>
     </li>
</f:for>

It should be possible to use <f:image /> with {video.previewImage} as its input - that way, further processing (crop scale mask) would be possible.