Table with image column: How to best detect 403 responses?

💬 App Building
1

I have a table with an image column. The table is large and has a couple of thousand rows. The images are populated from a select query which returns urls such as e.g. https://images.albertsons-media.com/is/image/ABS/184020020.

Some of the image urls return a 403 (example: https://images.albertsons-media.com/is/image/ABS/1840200) and I'd like to be able to quickly find the broken image urls in the table, maybe by sorting or some kind of filtering.

What is the best way to do this?

3

Hi @BernhardLenz,

I know you have a couple of thousands of rows but I was thinking of using a script to enhance the data something like the following screenshot. Going through each image and trying to fetch it.

Screenshot 2025-06-27 at 19.01.07
Screenshot 2025-06-27 at 19.01.071786×1308 305 KB

Then I pass the upgraded data to the table and there you can filter by the isImageBroken field.
This could be a workaround for now. If it works with your images it might be faster to use the method: "HEAD" but it depends on the images some do not support those requests.

const data = await get_tour_orders.trigger();

const rows = formatDataAsArray(data);

return await Promise.all(rows.map(async row => {
  try {
    const res = await fetch(row?.image, { method: 'GET' });
    return { ...row, isImageBroken: res.status === 403 };
  } catch (e) {
    return { ...row, isImageBroken: true };
  }
}));

Let me know if it helps or works :slight_smile: