Check if url works/ loads properly

Question

I have a url. How can I check if that url works and displays the image and if the link doesn't work or is broken I want to check if a different url works the if this one doesn't work to just log all urls don't work. How can I achieve this. Thanks in advance.

//I have a url like:
const myUrl = 'https://img.youtube.com/vi/Q5twKgxO8xg/maxresdefault.jpg'

//How can I check if th url work and if not try a different url
if (myUrl Works){
  console.log('url works')
} else {
  //check if this url works: 'https://img.youtube.com/vi/Q5twKgxO8xg/hqdefault.jpg'
  if (newUrl works) {
    console.log('new url works')
  } else {
    console.log('all urls broken')
  }
}

Does this answer your question? [Check if image exists on server using JavaScript?](https://stackoverflow.com/questions/18837735/check-if-image-exists-on-server-using-javascript) — Idrizi.A, Sep 08 '22 at 11:07
The code works, but img.youtube.com always returns a valid placeholder image. There is probably no way to tell — Idrizi.A, Sep 08 '22 at 11:29

score 0 · Answer 1 · answered Sep 08 '22 at 11:07

0

You can use fetch API to check whether the image is available or not:

fetch('https://img.youtube.com/vi/Q5twKgxO8xg/maxresdefault.jpg', {
  method: 'HEAD'
}).then(res => {
  if (res.ok) {
    console.log('Image URL works.');
  } else {
    console.log('Image URL does not works.');
  }
}).catch(err => console.log('Error:', err));

answered Sep 08 '22 at 11:07

DCodeMania

1,027
2
7
19

this doesn't work all I get is ```Error: TypeError: Failed to fetch``` – seriously Sep 08 '22 at 11:14
Due to CORS policy, you can not use other domain links. You have to use it within the same domain. – DCodeMania Sep 08 '22 at 11:18
yeah but the youtube img link is definetly not my domain so I need a cross domain solution – seriously Sep 08 '22 at 11:20

score 0 · Answer 2 · answered Sep 08 '22 at 12:59

0

You can use jQuery AJAX to check your image:

const myUrl = 'https://img.youtube.com/vi/Q5twKgxO8xg/maxresdefault.jpg'
$.ajax(myUrl, {
   type: "GET",
   crossDomain: true,
   error: function () {
        console.log('url broken')
   },
   complete: function(xhr, textStatus) {
        if (xhr.status == 200 && xhr.status == 301 && xhr.status == 302)
        {
            console.log('url work')
        }
    } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

answered Sep 08 '22 at 12:59

Alex J

162
8

in this code, if URL redirecting, they said ```url work```. To stop that, simply remove the ```xhr.status == 301 && xhr.status == 302``` in code – Alex J Sep 08 '22 at 13:02
This also won't work across domains because of CORS. – Fred Sep 08 '22 at 13:03
I added ```crossDomain: true``` before. in my case it's work without any problem – Alex J Sep 08 '22 at 13:11
this doesn't work for example this https://img.youtube.com/vi/Q5twKgxO8xg/hqdefault.jpg works but function return url broken – seriously Sep 08 '22 at 23:44

score 0 · Answer 3 · answered Sep 08 '22 at 13:05

0

You can use the onerror global attribute on a img element.

<img src="https://img.youtube.com/vi/Q5twKgxO8xg/maxresdefault.jpg" onerror="imageFailed()" />

function imageFailed() {
  console.log('Image URL does not works.');
}

answered Sep 08 '22 at 13:05

Fred

12,086
7
60
83

Check if url works/ loads properly

3 Answers3