---
title: "f:uri.image und f:image Problem"
url: "https://www.typo3.net/d/126284-furiimage-und-fimage-problem"
source: "typo3.net"
tags: ["Extensions","Extbase","Fluid","Frage","ViewHelper"]
created: "2017-10-13"
last_reply: "2017-10-20"
replies: 6
solved: true
page: 1
pages: 1
lang: "de"
---

# f:uri.image und f:image Problem

Extensions › Extbase · 6 Antworten · gelöst · gestartet 2017-10-13

## Frage

**mimii** · 2017-10-13 · [Beitrag #1](https://www.typo3.net/d/126284-furiimage-und-fimage-problem/1)

Hallo ins Forum,

wie krieg ich den Bildpfad in in den <source>? Mein Fluid sieht so aus

```html
...
<div class="carousel-inner">
<f:for each="{carouselImg}" as="carouselImage" iteration="i">
<f:if condition="{i.isFirst}">
<f:then>
<div class="carousel-item active">
</f:then>
<f:else>
<div class="carousel-item">
</f:else>
</f:if>
<picture>
<source srcset="???" media="(min-width:2000)" />
<source srcset="???" media="(min-width:1400)" />
<source srcset="???" media="(min-width:0px)" />
<f:image image="{carouselImage}" class="d-block w-100 img-fluid" alt="{fileReference.alternative}"/>
</picture>
</div>
</f:for>	
</div>
...
```

Es handelt sich um einen Slider der auch funktioniert, derzeit aber nur mit dem Bild, das über <f:image...> ausgegeben wird. Ich möchte aber im <picture> drei unterschiedliche Bildgrößen bereitstellen, die ich über das image Manipulation erstelle.
Das HTML sieht für ein Bild dann so aus, das srcset bleibt einfach leer.

```html
<picture>
<source srcset="" media="(min-width:2000)" />
<source srcset="" media="(min-width:1400)" />
<source srcset="" media="(min-width:0px)" />
<img class="d-block w-100 img-fluid" src="fileadmin/user_upload/bilder/carousel/bild-1.jpg" width="2000" height="500" alt="Bild 1" title="Bild 1" />
</picture>
```

Ich habe f:uri.image und f:imgage im srcset probiert, vielleicht ist meine Schreibweise falsch gewesen? Wie wäre hier denn die korrekte Schreibweise, um auf das entsprechnede Bild zuzugreifen?
Oder funktioniert der <picture> Tag nicht?

Probiert habe ich auch mal einen festen Pfad

```html
<source srcset="{f:uri.image(src:'user_upload/bilder/carousel/bild-1.jpg')}" media="(min-width:2000)" />
```

Dann sieht das HTML so aus:

```plaintext
<source srcset="{f:uri.image(src:'user_upload/bilder/carousel/bild.jpg'), treadIdAsReference:1}" media="(min-width:2000)">
```

Danke für n Tipp und Gruß
mimii

## Beste Antwort

**Teisinger** · 2017-10-19 · [Beitrag #6](https://www.typo3.net/d/126284-furiimage-und-fimage-problem/6)

Welche Fluid Version? Bzw. Welche Typo3 Version?

So zum Beispiel Typo3 7:

```typoscript
<picture>
		<source srcset="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '1920')}" media="(min-width: 1601px)">
		<source srcset="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '1600')}" media="(min-width: 1334px)">
		<source srcset="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '1333')}" media="(min-width: 1001px)">
		<source srcset="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '1000')}" media="(min-width: 801px)">
		<source srcset="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '800')}" media="(min-width: 601px)">
		<source srcset="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '600')}" media="(min-width: 401px)">
		<source srcset="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '400')}" media="(min-width: 321px)">
		<source srcset="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '320')}" media="(min-width: 200px)">
		<img src="{f:uri.image(src:'{column.media.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{data.imageheight}', maxHeight: '{data.imageheight}', width: '{data.imagewidth}', maxWidth: '{data.imagewidth}')}"
			{f:if(condition: '{data.imagewidth}', then: 'width="{data.imagewidth}"')}
			{f:if(condition: '{data.imageheight}', then: 'height="{data.imageheight}"')}
			title="{column.media.title}"
			alt="{column.media.alternative}">
	</picture>
```

und hier für Typo3 8 (musst du die werte halt anpassen):

```html
<picture>
      <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '1920')}" media="(min-width: 1601px)">
      <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '1600')}" media="(min-width: 1334px)">
      <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '1333')}" media="(min-width: 1001px)">
      <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '1000')}" media="(min-width: 801px)">
      <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '800')}" media="(min-width: 601px)">
      <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '600')}" media="(min-width: 401px)">
      <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '400')}" media="(min-width: 321px)">
      <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '320')}" media="(min-width: 200px)">
      <img src="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{h}', maxHeight: '{data.imageheight}', width: '{w}', maxWidth: '{data.imagewidth}')}"
        {f:if(condition: '{data.imagewidth}', then: 'width="{data.imagewidth}"', else: 'width="{w}"')}
        {f:if(condition: '{data.imageheight}', then: 'height="{data.imageheight}"', else: 'height="{h}"')}
      />
    </picture>
```

## Antworten

### [#2](https://www.typo3.net/d/126284-furiimage-und-fimage-problem/2) · freeatweb · 2017-10-18

Hallo,

für solche Anforderungen kann ich die Extension sms-responsive-images empfehlen.

<https://github.com/sitegeist/sms-responsive-images>

Anleitung/Blog: <https://techblog.sitegeist.de/responsive-images-with-typo3-8-7/>

Lg

### [#3](https://www.typo3.net/d/126284-furiimage-und-fimage-problem/3) · mimii · 2017-10-19

Hallo
und vielen Dank für die Antwort. Die Extension habe ich bereits gefunden, ich wollte es jedoch ohne lösen und frage mich einfach, warum im <source srcset="{f:uri.image(src:'.....> keine Ausgabe erfolgt, bzw einfach nichts drin steht. Setze ich <f:uri.image....> einfach ins Fluidtemplate wird mir der Pfad korrekt angezeigt.

Ich stöbere seit Tagen im Web und finde keinen Hinweis, warum es inline nicht funktioniert :-/

Viele Grüße
mimii

### [#4](https://www.typo3.net/d/126284-furiimage-und-fimage-problem/4) · freeatweb · 2017-10-19

Hallo,

ich würde die URL der Bilder anders auflösen.

Versuch mal: <f:image src="{carousel.ImageoriginalResource.publicUrl}" />  (ohne treatIdAsReference!)

Funktioniert natürlich nur dann, wenn die Bilder mittels FAL eingebunden sind.

Lg

### [#5](https://www.typo3.net/d/126284-furiimage-und-fimage-problem/5) · mimii · 2017-10-19

THX für die Rückmeldung,

ich glaube der Fehler liegt ganz wo anders. Ich habe den Pfad im <source ....> mal fest reingeschrieben und er wurde auch im HTML angezeigt. Trotzdem wurde nicht das Bild aus dem <source ...> Tag genommen sondern immer das aus dem <img ...> weiter unten.

```html
<picture>

<!-- Dieser Code wird ignoriert -->
<source srcset="fileadmin/user_upload/bilder/carousel/bild-1_gross.jpg" media="(min-width:2000)" />
<source srcset="fileadmin/user_upload/bilder/carousel/bild-1_mittel.jpg" media="(min-width:1400)" />
<source srcset="fileadmin/user_upload/bilder/carousel/bild-1_klein.jpg" media="(min-width:0px)" />

<!-- Dieser Code wird wird IMMER genommen -->
<f:image image="{carouselImage}" class="d-block w-100 img-fluid" alt="{fileReference.alternative}"/>

</picture>
```

Somit denke ich, dass einfach das <picture> irgendwie ignoriert wird.

In 6.2 gab es mal sowas wie LayoutKey, wo man einstellen konnte welche Variante von Bildausgabe man haben will (<https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/ContentObjects/Image/Index.html>). Das steht jetzt zwar unter jetzt auch noch unter der Typoscript Reference latest, aber ich weiß nicht so recht, wie ich das jetzt mit dem Fluid in verbindung bringen könnte *stöhn*

Viele Grüße
mimii

### [#6](https://www.typo3.net/d/126284-furiimage-und-fimage-problem/6) · Teisinger · 2017-10-19 · Beste Antwort

(Text siehe oben unter „Beste Antwort“.)

### [#7](https://www.typo3.net/d/126284-furiimage-und-fimage-problem/7) · mimii · 2017-10-20

OMG,

war das ein Hickhack. Es läuft mit

```html
<source srcset="{f:uri.image(src:'{carouselImage.uid}', treatIdAsReference:'1', cropVariant: 'gross')}" media="(min-width: 1401px)">
```

THX für deine Hilfe
mimii

---

Quelle: „f:uri.image und f:image Problem“, typo3.net, https://www.typo3.net/d/126284-furiimage-und-fimage-problem
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.