How can I add a fallback image in a table row?

App Building
1

Hi there,

I am using the table component and one of my columns displays an avatar for a social media profile in each row. Sometimes, the image URL may be expired and result in a broken image, and I'd love to be able to display a fallback image in this situation. The column type is currently set to "Image URL"

12-12-2022-14-58-23
12-12-2022-14-58-231120×621 88.8 KB

I have also tried switching the column type to html and trying variations of the following:

<img 
  src="{{self}}"
  onerror="this.onerror=null;this.src='https://www.w3schools.com/images/w3schools_green.jpg';"
>

and

<object data"{{self}}" type="image/jpg">
  <img src="https://www.w3schools.com/images/w3schools_green.jpg">
</object>

and I've also tried some javascript options, too, but nothing has done the trick. The w3schools image url is the "fallback" url for this example.

I know the Avatar component handles this use case, but it isn't available as an option for the column type. I'd love to hear if anyone has suggestions on how I might be able to handle this in a table :pray:

2

Try
{{self === null || self === '' || self === undefined?'yourdefaultimageurlvalue':self}}

1 Like
3

Thanks for the suggestion, @ScottR!

Unfortunately, this didn't work. In the scenario I'm working with, self is always defined and will always be an image URL. However, it's uncertain if the URL actually points to a valid image or a broken image (i.e. the image no longer exists at that URL). So in the screenshot below, the second row does have self defined for the column, but no image exists at that URL anymore
12-12-2022-17-04-02

4

I see now... there's quite a bit on the web when searching for a solution - I just don't want to post redundant stuff you may have tried already

5

Thanks, Scott! I've tried a bunch of different approaches that I find on StackOverflow, without much luck. The HTML approaches haven't been working anyway so I might spend some time digging into some more JS solutions. I'll report back here if I find a solution

6

:thinking: you can also try fiddling around with the :before CSS selector as mentioned in the second reply on this thread. You can create a unique class for your table's img tags and then reference that using custom CSS. Curious to know what you find!

2 Likes
7

Thanks so much, @Kabirdas! It looks like the :before selector is key here. I have an image appearing where the broken images used to appear. Just need to spend some time tweaking the CSS to make it look better, but I think this should work! :raised_hands:

8

Niceee, that's so useful @Kabirdas :v: