Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #38638 > unrolled thread

missing image error

Back to article view | Back to comp.lang.javascript

Contents

  missing image error Andrew Poulos <ap_prog@hotmail.com> - 2020-08-04 14:58 +1000
    Re: missing image error Arno Welzel <usenet@arnowelzel.de> - 2020-08-04 10:29 +0200
      Re: missing image error James Kirk <noneya.invalid@gmail.com> - 2020-08-04 22:38 -0400
        Re: missing image error Arno Welzel <usenet@arnowelzel.de> - 2020-08-05 07:49 +0200
    Re: missing image error Julio Di Egidio <julio@diegidio.name> - 2020-08-04 02:18 -0700
      Re: missing image error Andrew Poulos <ap_prog@hotmail.com> - 2020-08-05 13:20 +1000
    Re: missing image error Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2020-08-05 08:44 +0200
      Re: missing image error Andrew Poulos <ap_prog@hotmail.com> - 2020-08-05 18:02 +1000
        Re: missing image error Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2020-08-05 10:18 +0200
        Re: missing image error Julio Di Egidio <julio@diegidio.name> - 2020-08-05 02:36 -0700

#38638 — missing image error

I'm dynamically adding images to a page using

let img = new Image();

img.src = 'images/' + name + '.jpg';
img.setAttribute("onerror", "this.onerror=null; 
this.src='images/imagenotfound.png'");
...

and the page works as expected. That is, when the image is not available 
'imagenotfound' is shown in its place.

The client tests the page with the console open and each time an image 
is unavailable they see a 404 error. I've tried explaining that it needs 
to error before it can know to replace it with 'imagenotfound' but they 
would prefer that image's 404 error not show.

Is there a way to trap the 404 so it doesn't show in the console?

Or is there some other way I can try to get the image and thereby be 
able to trap the 404?

Andrew Poulos

[toc] | [next] | [standalone]

#38641

Andrew Poulos:

> I'm dynamically adding images to a page using
> 
> let img = new Image();
> 
> img.src = 'images/' + name + '.jpg';
> img.setAttribute("onerror", "this.onerror=null; 
> this.src='images/imagenotfound.png'");
> ...
> 
> and the page works as expected. That is, when the image is not available 
> 'imagenotfound' is shown in its place.
> 
> The client tests the page with the console open and each time an image 
> is unavailable they see a 404 error. I've tried explaining that it needs 
> to error before it can know to replace it with 'imagenotfound' but they 
> would prefer that image's 404 error not show.
> 
> Is there a way to trap the 404 so it doesn't show in the console?
> Or is there some other way I can try to get the image and thereby be 
> able to trap the 404?

No. That's the reason why there is a console - to see what is going on.
Without trying to load an image and getting the 404 error the "onerror"
attribute would not work at all.

The only way to avoid 404 errors would be a wrapper script on the
*server* which will either return the actual image or a placeholder if
the image can not be loaded:

<img src="server-side-loader?image=myimage.jpg" ...>

Where "server-side-loader" is a PHP script etc. which will try to load
the specificed image file and if this is not possible return the
placeholder.


-- 
Arno Welzel
https://arnowelzel.de

[toc] | [prev] | [next] | [standalone]

#38652

In Message: <hoskjfFefplU1@mid.individual.net>
Arno Welzel <usenet@arnowelzel.de> wrote:

> Andrew Poulos:

>> I'm dynamically adding images to a page using

[snip]

>> and the page works as expected. That is, when the image is not
>> available 'imagenotfound' is shown in its place.

>> The client tests the page with the console open and each time an
>> image is unavailable they see a 404 error. I've tried explaining
>> that it needs to error before it can know to replace it with
>> 'imagenotfound' but they would prefer that image's 404 error not
>> show.

>> Is there a way to trap the 404 so it doesn't show in the console?
>> Or is there some other way I can try to get the image and thereby
>> be able to trap the 404?  

> No. That's the reason why there is a console - to see what is going
> on. Without trying to load an image and getting the 404 error the
> "onerror" attribute would not work at all.

> The only way to avoid 404 errors would be a wrapper script on the
> *server* which will either return the actual image or a placeholder
> if the image can not be loaded:

> <img src="server-side-loader?image=myimage.jpg" ...>

> Where "server-side-loader" is a PHP script etc. which will try to
> load the specificed image file and if this is not possible return
> the placeholder.

𝐬𝐞𝐫v𝐞𝐫 𝐜𝐨𝐧𝐟𝐢𝐠𝐮𝐫𝐚𝐭𝐢𝐨𝐧 

   RewriteCond %{REQUEST_FILENAME} !-f 
   RewriteCond %{REQUEST_URI} /img/.*\.(jpg|png|svg)$ [NC]
   RewriteRule . /img/funnyClown.jpg [L]

If the server generates a listing.

  Scrape the index for image links, then check images links for a
  match.



-- 
J𝕒𝕞𝕖𝕤 𝕂𝕚𝕣𝕜

[toc] | [prev] | [next] | [standalone]

#38657

James Kirk:

> In Message: <hoskjfFefplU1@mid.individual.net>
> Arno Welzel <usenet@arnowelzel.de> wrote:
[...]
>> The only way to avoid 404 errors would be a wrapper script on the
>> *server* which will either return the actual image or a placeholder
>> if the image can not be loaded:
> 
>> <img src="server-side-loader?image=myimage.jpg" ...>
> 
>> Where "server-side-loader" is a PHP script etc. which will try to
>> load the specificed image file and if this is not possible return
>> the placeholder.
> 
> 𝐬𝐞𝐫v𝐞𝐫 𝐜𝐨𝐧𝐟𝐢𝐠𝐮𝐫𝐚𝐭𝐢𝐨𝐧 
> 
>    RewriteCond %{REQUEST_FILENAME} !-f 
>    RewriteCond %{REQUEST_URI} /img/.*\.(jpg|png|svg)$ [NC]
>    RewriteRule . /img/funnyClown.jpg [L]
> 
> If the server generates a listing.

Yep - this is a more elegant solution if you use Apache. And this should
also work without directory index enabled.

Also see: <https://httpd.apache.org/docs/2.4/rewrite/>

But in addition you also need this:

RewriteEngine on

And just to be sure: the Apache rewrite module must also be enabled on
the server.

The above rules translate as following:

1) RewriteCond %{REQUEST_FILENAME} !-f

If the requested resource is not an existing file

2) RewriteCond %{REQUEST_URI} /img/.*\.(jpg|png|svg)$ [NC]

If the requested URI starts with "/img/" and ends with ".jpg", ".png" or
".svg". The flags [NC] are for "no case", so the path or extension can
also be ".JPG" or the path may start with "/IMG/" as well.

3) RewriteRule . /img/funnyClown.jpg [L]

Response with a temporary redirect (HTTP 302) to /img/funnyClown.jpg and
stop evalulation any other rule following ([L]).


-- 
Arno Welzel
https://arnowelzel.de

[toc] | [prev] | [next] | [standalone]

#38644

On Tuesday, 4 August 2020 06:58:31 UTC+2, Andrew Poulos  wrote:
> I'm dynamically adding images to a page using
> 
> let img = new Image();
> 
> img.src = 'images/' + name + '.jpg';
> img.setAttribute("onerror", "this.onerror=null; 
> this.src='images/imagenotfound.png'");
> ...
> 
> and the page works as expected. That is, when the image is not available 
> 'imagenotfound' is shown in its place.
> 
> The client tests the page with the console open and each time an image 
> is unavailable they see a 404 error. I've tried explaining that it needs 
> to error before it can know to replace it with 'imagenotfound' but they 
> would prefer that image's 404 error not show.
> 
> Is there a way to trap the 404 so it doesn't show in the console?
> 
> Or is there some other way I can try to get the image and thereby be 
> able to trap the 404?

As Mr Welzel was pointing out, the server is returning an HTTP error 404,
which is the error you are then handling, i.e. the error has to happen.

OTOH, (I think) in most consoles there is an option to suppress reporting
network errors in the console: if you really need to...  But you might
want to tell your customer that they should NOT look at the dev console
unless they can stand it.  ;)

Julio

[toc] | [prev] | [next] | [standalone]

#38655

On 4/08/2020 7:18 pm, Julio Di Egidio wrote:
> On Tuesday, 4 August 2020 06:58:31 UTC+2, Andrew Poulos  wrote:
>> I'm dynamically adding images to a page using
>>
>> let img = new Image();
>>
>> img.src = 'images/' + name + '.jpg';
>> img.setAttribute("onerror", "this.onerror=null;
>> this.src='images/imagenotfound.png'");
>> ...
>>
>> and the page works as expected. That is, when the image is not available
>> 'imagenotfound' is shown in its place.
>>
>> The client tests the page with the console open and each time an image
>> is unavailable they see a 404 error. I've tried explaining that it needs
>> to error before it can know to replace it with 'imagenotfound' but they
>> would prefer that image's 404 error not show.
>>
>> Is there a way to trap the 404 so it doesn't show in the console?
>>
>> Or is there some other way I can try to get the image and thereby be
>> able to trap the 404?
> 
> As Mr Welzel was pointing out, the server is returning an HTTP error 404,
> which is the error you are then handling, i.e. the error has to happen.
> 
> OTOH, (I think) in most consoles there is an option to suppress reporting
> network errors in the console: if you really need to...  But you might
> want to tell your customer that they should NOT look at the dev console
> unless they can stand it.  ;)

Thanks, any missing image is handled correctly and it's only the 
client's perception of the error as "serious" that's the problem (ie. 
its a management issue.)

Kirk's idea to do a server redirect, while good, means me asking 
unhelpful IT people to do something :-(

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#38662

Andrew Poulos wrote:

> let img = new Image();
> 
> img.src = 'images/' + name + '.jpg';
> img.setAttribute("onerror", "this.onerror=null;
  ^^^^^^^^^^^^^^^^^^^^              ^^^^^^^
> this.src='images/imagenotfound.png'");

Yuck.  

  img.onerror = function () {
    this.onerror = null;
    this.src = 'images/imagenotfound.png';
  };

Obviously the compatibility of this is at least as good as the compatibility 
of the original code.

However, for this to work reliably, as always, the event listener has to be 
defined *before* the property is changed that can fire the event:

  img.onerror = …;
  img.src = 'images/' + name + '.jpg';

> Is there a way to trap the 404 so it doesn't show in the console?

Unlikely.
 
> Or is there some other way I can try to get the image and thereby be
> able to trap the 404?

XMLHttpRequest/Fetch API.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#38664

On 5/08/2020 4:44 pm, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
> 
>> let img = new Image();
>>
>> img.src = 'images/' + name + '.jpg';
>> img.setAttribute("onerror", "this.onerror=null;
>    ^^^^^^^^^^^^^^^^^^^^              ^^^^^^^
>> this.src='images/imagenotfound.png'");
> 
> Yuck.
> 
>    img.onerror = function () {
>      this.onerror = null;
>      this.src = 'images/imagenotfound.png';
>    };
> 
> Obviously the compatibility of this is at least as good as the compatibility
> of the original code.
> 
> However, for this to work reliably, as always, the event listener has to be
> defined *before* the property is changed that can fire the event:
> 
>    img.onerror = …;
>    img.src = 'images/' + name + '.jpg';

I take your point and have amended my code. Though does the order matter 
for a dynamically added image? Can the failure of the image to load 
happen faster than the event listener being defined?

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#38666

Andrew Poulos wrote:

> On 5/08/2020 4:44 pm, Thomas 'PointedEars' Lahn wrote:
>> Andrew Poulos wrote:
>>> let img = new Image();
>>>
>>> img.src = 'images/' + name + '.jpg';
>>> img.setAttribute("onerror", "this.onerror=null;
>>    ^^^^^^^^^^^^^^^^^^^^              ^^^^^^^
>>> this.src='images/imagenotfound.png'");
>> 
>> […]
>> However, for this to work reliably, as always, the event listener has to
>> be defined *before* the property is changed that can fire the event:
>> 
>>    img.onerror = …;
>>    img.src = 'images/' + name + '.jpg';
> 
> I take your point and have amended my code. Though does the order matter
> for a dynamically added image?

Of course.  But you are not addding any image with this code.

> Can the failure of the image to load happen faster than the event listener 
> being defined?

Yes.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#38669

On Wednesday, 5 August 2020 10:02:54 UTC+2, Andrew Poulos  wrote:
> On 5/08/2020 4:44 pm, Thomas 'PointedEars' Lahn wrote:

> > However, for this to work reliably, as always, the event listener has to be
> > defined *before* the property is changed that can fire the event:
> > 
> >    img.onerror = …;
> >    img.src = 'images/' + name + '.jpg';
> 
> I take your point and have amended my code.

That point is utter nonsense: there is no concurrency in JS.

> Can the failure of the image to load
> happen faster than the event listener being defined?

While the image may very well start loading asynchronously to the script,
no events or other code will run until they have their chance to.

Julio

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web