Display image as SVG – "Failed to open stream"

[lenoir]

Hi,

I'm often struggling with placing SVG images as SVGs (not within an img or object tag). I'm getting the following error message:

Warning: file_get_contents(/site/assets/files/1022/schlaeger_1.svg): Failed to open stream: No such file or directory

Here's my code:

echo file_get_contents("{$content->images->eq(0)->url}");

($content is a repeater)

What is the correct way to place a SVG image as SVG (I really need it as a SVG).

Thanks!

[virtualgadjo]

hi,

first of all, just check if you have allowed svg files in your file or image field
if yes, i would strongly suggest you install this module
https://processwire.com/modules/file-validator-svg-sanitizer/
as svg being code made files they can be a bit dangerous

the second thing is the way you 'echo' the img
is your $content the 'as' of a 'foreach', that's to say an element of your repeater and not the repeater itself
well, let's assume it's the cas as in the contrary you should have written something like $page->content instead, but you can't access a repeater element field directly by the repeatr itself so, have you tried something like

foreach($page->your_repeater as $content) {
    echo '<img src="' . $content->images->eq(0)->url . '" alt="" />' . "\n";
}
// or, if content is the name of the repeater
foreach($page->content as $c) {
    echo '<img src="' . $c->images->eq(0)->url . '" alt="" />' . "\n";
}

well, the names should be yours of course 🙂

have a nice day
 

[BitPoet]

It should be $content->images->eq(0)->path since file_get_contents operates on the local file system.

[lenoir]

Thanks to you two! 

'path' didn't work either, but put me in the right direction. I used httpUrl instead of url and that worked. See full code here:

foreach($page->textblocks_repeater as $content){
	if(count($content->images)){ 
		echo file_get_contents("{$content->images->eq(0)->httpUrl}"); 
	}
}

 

[BitPoet]

18 hours ago, lenoir said:

I used httpUrl instead of url and that worked.

It worked, but it's a pretty roundabout way to go about it, as the server performs a http GET for the SVG to retrieve its contents. But my bad, path is the wrong property. Try "filename" instead.

[lenoir]

1 hour ago, BitPoet said:

It worked, but it's a pretty roundabout way to go about it, as the server performs a http GET for the SVG to retrieve its contents. But my bad, path is the wrong property. Try "filename" instead.

Actually a good point, thank you. I was getting an error message on another device, so filename is probably cleaner. 

You think there's better way to get the SVG without the http GET? 

[virtualgadjo]

hoi,

would be happy to see but just aword to say that i use a lot of svg and src="<?= ...->url" ;?>" works fine if you just want to display it as an img

<img src="<?= $page->topimg->url; ?>" alt="" />

the flag you may know 🙂 is an svg in a simple image field
sure it would too to force download for example

have a nice day

 

[lenoir]

2 hours ago, virtualgadjo said:

would be happy to see but just aword to say that i use a lot of svg and src="<?= ...->url" ;?>" works fine if you just want to display it as an img

I use SVGs a lot as images too, but in some cases I want to be able to interact with some elements in the SVG (change the colors, animate elements with CSS, etc.), and you can't do that if they're inserted within an <img> tag.

[virtualgadjo]

hi,

sorry, as it was not said in your first post i assumed you were simply trying to access the svg as an simple image file
in the case your httpUrl stays the simplest way despite the get request except from putting the svg code in a textarea field, not very client friendly i must agree 😄

have a nice day

[BitPoet]

22 hours ago, lenoir said:

You think there's better way to get the SVG without the http GET? 

When you use file_get_contents with the filename property, there won't be an extra http GET, as it will recognize the local path and use regular file system IO. It's only when the argument to file_get_contents starts with a protocol schema indicator (http(s):// etc.) that it uses the network wrapper.