How to check if URL is valid and returns image

I have a list of people, with IDs. There is a system where I can form the image URL using the ID. But not every person has an image, so I want to test if the URL returns an image and if not put a different image in its place. How can I do that?

You might to use a simple java script logic using a built-in fetch function in order to check against a valid image.
for instance:

try {
  
  const response = await fetch(imageURL);
  return { result: imageURL };
      
} catch (err) {
  const error = {
    code: 'Fetching image',
    message: 'Something went wrong.',
    rawError: err,
  }
  
  console.log(error)
  return [1, { error }]
}

But I have a repeat property of a list component, so its not clear to me how I can use this flow function for each and every item in the list.

Since AppGyver enables two-way bindings, you could display a preview of the image based on its url. If no image is displayed (to the user or to you the Admin), then the url is not valid or link broken.

You want to do it when retrieving your data collection. The java script routine would loop through the count of records. The output of the java script routine would be the amended set of records.

Alternatively you might want to do it from inside your list component with the iteration logic. I hope that helps. Piotr

PS.
Personally I used both approaches with my web apps