How to check if link to image is not broken

Question

Is there way to check if link to image is working before adding src attribute to image? What I have tried:

First idea was to make ajax call to image src but I cannot be sure that CORS pocily will allow it.
Adding onError callback into my component. No luck because I use SSR and it causes problems

My use case: I'm building text editor and user can insert link to image. I want to know if link is ok before inserting it into my model.

i do not use react but there must be an way to use the old `onerror` attribute — bill.gates, Dec 07 '20 at 13:04
https://stackoverflow.com/a/18837818/4117599 This answer helped me — Kostya Tresko, Dec 09 '20 at 06:12

score 1 · Answer 1 · answered Dec 07 '20 at 13:05

1

The other answers/question aren't specifically about cross-domain requests. If you only have to support modern browsers you can use an opaque fetch request which works cross domain and is pretty easy to use.

fetch('http://example.com/your-image-url', { mode: 'no-cors' }).then(() => {
 if (response.ok) {
   // the image exists
 }
});

answered Dec 07 '20 at 13:05

Benjamin Gruenbaum

270,886
87
504
504

I cant get response status with `mode: no-cors`. https://stackoverflow.com/questions/54896998/how-to-process-fetch-response-from-an-opaque-type. Do you know how to solve this? – Kostya Tresko Dec 07 '20 at 14:02
I am not sure you can - but why? response.ok will be false – Benjamin Gruenbaum Dec 07 '20 at 19:26
response.ok will always be false with mode: no-cors. So `if(response.ok)` will never be reachable – Kostya Tresko Dec 08 '20 at 06:15

How to check if link to image is not broken

1 Answers1