I get back a simple html page from a request to my homemade server:
<html>
<head>
<title>Server Sample</title>
</head>
<img src="/stream.jpeg">
</html>
To render the image in img in the page, a second request is made to the server, under the path /stream.jpeg to get the actual image data. However, if this request fails for some reasons, I would like to show the user an error page, or a message somehow. Redirecting or producing an html error page from the context of the failing request does not seem to work, probably because the initial page expects an image. In this case the page shows "an empty" img tag instead of the wanted error.
What is the most portable way to solve this problem? I prefer using html solutions, if possible, but also javascript is allowed.
Note that the server I wrote is very very simple and generates very simple pages dynamically, it does not the sort of extension which a plex server can offer.
I get back a simple html page from a request to my homemade server:
<html>
<head>
<title>Server Sample</title>
</head>
<img src="/stream.jpeg">
</html>
To render the image in img in the page, a second request is made to the server, under the path /stream.jpeg to get the actual image data. However, if this request fails for some reasons, I would like to show the user an error page, or a message somehow. Redirecting or producing an html error page from the context of the failing request does not seem to work, probably because the initial page expects an image. In this case the page shows "an empty" img tag instead of the wanted error.
What is the most portable way to solve this problem? I prefer using html solutions, if possible, but also javascript is allowed.
Note that the server I wrote is very very simple and generates very simple pages dynamically, it does not the sort of extension which a plex server can offer.
Share Improve this question edited Sep 19, 2014 at 8:50 Martin asked Sep 19, 2014 at 8:33 MartinMartin 9,41913 gold badges57 silver badges89 bronze badges 4- 1 You can see the answer here : stackoverflow./questions/4285042/can-jquery-ajax-load-image – Ifch0o1 Commented Sep 19, 2014 at 8:45
- but does that need jquery and these sort of stuff? Mine is a very simple, homemade http server , I can generate simple pages dinamically , don't want/cannot rely on plex things... – Martin Commented Sep 19, 2014 at 8:46
- jQuery is very simple - it's just a js library that makes using js much easier, for example it makes doing an ajax call (which you need to do to check if the image url works or not) a lot simpler – Pete Commented Sep 19, 2014 at 8:51
- The easy way is to use jQuery's ajax or load method. But if you in some reasons don't want to load the whole library just for one method, you can use native XMLHTTPRequest to get image data and do whatever you want with this. Here is doc: w3schools./ajax/ajax_xmlhttprequest_send.asp – Anton Commented Sep 19, 2014 at 8:57
1 Answer
Reset to default 6Try this:
<img src="stream.jpeg" onerror="errorFunction();">
But onerror attribute is included in HTML5. So that will fail in older HTML.
JavaScript:
function errorFunction() {
// Here you implement what's happening if the image failed to load.
// For example:
window.location.assign('http://my-site/error-page.html');
// or
console.log('Sorry, but image cannot be loaded right now.');
}
This function must be defined before <img> tag. Otherwise if image failed to load before the function is defined, HTML will not found this function and you will get an reference error.