hide broken img chrome extension

Question

my issue: On jsfiddle, I managed to successfully hide broken image icon. However when loaded up on Chrome extension, It doesn't work :/

example:

some background: the "post.url" may or may not be an image file. And I would like to hide it if it's not. How do I do that?

This is my current code:

$("#art").append('<img id="img" src="' + post.url + '"onerror="this.style.display=\'none\'"/>');

maybe you are looking for this https://stackoverflow.com/questions/9714525/javascript-image-url-verify#answer-9714891, then if its not valid url then you can hide it — Rahul, Dec 05 '18 at 07:07
yeah i have seen that post. but i don't wanna use it because of "function checkURL(url) { return(url.match(/\.(jpeg|jpg|gif|png)$/) != null); }" because many url contains gifv that would show broken image too. but gif is fine. so i'm thinking that the match will return gifv too — Julliard, Dec 05 '18 at 07:10

wOxxOm · Accepted Answer · 2018-12-05T07:59:02.420

2

use the correct devtools - extension popup has its own separate one accessible by right-clicking the popup, then clicking "inspect" (see this answer for various browsers);
in the correct devtools you'll see the error about inline JS being blocked;
since extensions can't use inline JS by default (this is a good thing so don't change it),
instead attach the onerror listener programmatically:

$(`<img id="img" src="${post.url}">`).appendTo('#art').on('error', function() {
  this.style.display = 'none';
});

edited Dec 05 '18 at 07:59

answered Dec 05 '18 at 07:42

wOxxOm

i don't know why, but when i used your code, and when it is error, it doesn't run the lines of code after that – Julliard Dec 05 '18 at 07:53
1

@KwokWenJian, thanks for the heads up, I've reworked the code. – wOxxOm Dec 05 '18 at 07:59
works perfectly now :) May i trouble you to check this code too? i am also trying to fetch video link. there are two keys (either one or the other) to retrieve the link. so i do this: try { $("#art").append(''); } catch(err) { $("#art").append(''); } it works, but should i be doing this? is there a better way? – Julliard Dec 05 '18 at 08:10
I don't know. Maybe? Looks like a different issue for a separate question I guess. – wOxxOm Dec 05 '18 at 08:24

score 0 · Answer 2 · answered Dec 05 '18 at 07:34

0

Use this to check as Rahul and Mr lister has suggested

function checkURL(url) {
    return(url.match(/\.(jpeg|jpg|gif|png)$/) != null);
}

answered Dec 05 '18 at 07:34

Julliard

2 Answers2