# Image component - onerror fallback

**URL:** <https://community.appfarm.io/t/image-component-onerror-fallback/2107>\
**Category:** Ask the community\
**Created:** [October 21, 2025, 9:47am UTC](https://community.appfarm.io/t/image-component-onerror-fallback/2107 "2025-10-21T09:47:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jakob](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/jakob/32/2614_2.png) [@jakob](https://community.appfarm.io/u/jakob)\
**Post date:** [October 21, 2025, 9:47am UTC](https://community.appfarm.io/t/image-component-onerror-fallback/2107/1 "2025-10-21T09:47:26Z")

</div>

Hello Community!

I am displaying thumbnail images for products in my app, which i get from a third party URL when constructing a string like: “productbase.no/produkt/{{productID}}/produktbilde”. However sometimes the URL returns broken formats or a 404.

Is there anyway to fallback to a placeholder image (a resource file) when the imageUrl fails? \<img src={`https://produktbase.no/produkt/${productID}/produktbilde`}  
**onerror** =“this.src=‘[https://storage.googleapis.com/appfarm-public/.../placeholder.png’”](https://storage.googleapis.com/appfarm-public/.../placeholder.png%E2%80%99%E2%80%9D) /\> something equivalent onerror in the html img tag.

Alt text only displays string and can’t render a image so that doesn’t solve it either.

Ive tried fetching the URL and checking the response in function editor, but that’s seems like an excessive solution, especially for 300k products. And ive ran into some complications with fetching async from client in function editor.

Any suggestions?

Best Regards,  
Jakob

---

<div class="post-metadata">

**Author:** ![kristian](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/kristian/32/58_2.png) [@kristian](https://community.appfarm.io/u/kristian)\
**Post date:** [October 22, 2025, 8:31am UTC](https://community.appfarm.io/t/image-component-onerror-fallback/2107/2 "2025-10-22T08:31:24Z")

</div>

Hello!

That sound like a good feature request - I just subitted it!

Until then (might take some time to have the feature implemented), can you try to add a Coded Component instead, and put this HTML inside it?

\<img src=“” onerror=“this.onerror=null; this.src=‘\<URL to placeholder image here’;”/\>

---

<div class="post-metadata">

**Author:** ![jakob](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/jakob/32/2614_2.png) [@jakob](https://community.appfarm.io/u/jakob)\
**Post date:** [October 27, 2025, 12:02pm UTC](https://community.appfarm.io/t/image-component-onerror-fallback/2107/3 "2025-10-27T12:02:57Z")

</div>

Thanks! Solved it with a coded component. This was the implementation for anyone interested:

**HTML**  
`<img id="productImage" style="width: 100%; height: auto;" alt="Product Image" />`

**JS**

```auto
const { data, element } = appfarm;

const imageElement = element.querySelector(‘#productImage’);

const imageDataSource = data.primaryImageSource.get();
const productData = data.productInfo.get();

const primaryImageUrl = imageDataSource[0]?.imageURL
? imageDataSource[0].imageURL
: https://example.com/api/product/${productData}/image;

imageElement.src = primaryImageUrl;

imageElement.onerror = function() {
imageElement.src = “https://example.com/path/to/fallback-image.jpg”;
};

```