TYPO3-Exception: You must either specify a string src or a File object


Share it: facebookTwitter | LinkedIn

Whoops, looks like something went wrong?

If you see this TYPO3 exception in your browser, an image view helper in Fluid does not find the image path: #1382284106 TYPO3Fluid\Fluid\Core\ViewHelper\Exception

What exactly is happening here?

The Fluid ViewHelper <f:image /> expects either a direct image path or a file object to output an image. If neither is available or is faulty, an error message is issued. Unfortunately, there is no fallback function within the ViewHelper, so a single missing image can make the entire page unusable.

Standard-ViewHelper

<!-- If the variable {image} contains a file object -->
<f:image image="{image}" />

<!-- If the variable {image} contains an image url -->
<f:image src="{image}" />

Check whether the file object exists

I use the following code quite often to check whether a file object actually exists. Of course, it is not checked here whether the image is corrupt or the file is present. But this small IF condition catches at least if an editor has not assigned an image.

<!-- Show the ViewHelper only if the file object exists -->
<f:if condition="{image}">
	<f:image image="{image}" />
</f:if>

<!-- Another variant with IF / ELSE and placeholder -->
<f:if condition="{image}">
  	<f:then>
  		<f:image image="{image}" />
  	</f:then>
  	<f:else>
  		<img src="my/placeholder.jpg" alt="Demo">
  	</f:else>
</f:if>

Check whether the image URL is correct and the image exists

With the direct image URL it is not quite as easy as with the file object. TYPO3 checks whether the image is available, but does not provide a fallback option. One possible solution is the ViewHelper <f:media.exists>, which is included in the VHS extension. If you don't use VHS, you need a different solution. For this case I wrote a small extension called fallback. It currently provides a ViewHelper, which checks whether an image really exists. If the image is missing or read-only, a fallback image is displayed.

Use fallback for your own fluid templates

Here is a small example of how you can easily use the Fallback ViewHelper of the fallback extension in the fluid templates of your extension or content elements:

{namespace fallback=SIMONKOEHLER\Fallback\ViewHelpers}

<!-- Only the standard placeholder is output here. Also works well as a "helper" for extension development. -->
<f:image src="{fallback:image()}" maxWidth="800" />

<!-- Image not available: The standard placeholder is output here. -->
<f:image src="{fallback:image(url:'fileadmin/my-wrong-imagepath.jpg')}" />

<!-- Image not available with placeholder: The predefined placeholder is output here. -->
<f:image src="{fallback:image(url:'fileadmin/my-wrong-imagepath.jpg', placeholder:'fileadmin/custom-placeholder.jpg')}" />

<!-- Image available with placeholder: Here the image is output as desired. -->
<f:image src="{fallback:image(url:'fileadmin/my-correct-imagepath.jpg', placeholder:'fileadmin/custom-placeholder.jpg')}" />

Links and conclusion

Maybe this is not the perfect solution for larger projects, or you have further suggestions and ideas? Just write them in the comments below!

Links:

Finger pointing at you!

WE WANT YOU!

Your are a web design expert and you like writing articles?

JOIN US


Write comment

* These fields are required

Comments

No Comments


Share it: facebookTwitter | LinkedIn
100% anonymous web host