# Alternative method to bypass a bug when attempting to use \*.webp images with the asset library

**URL:** <https://forum.builder.io/t/alternative-method-to-bypass-a-bug-when-attempting-to-use-webp-images-with-the-asset-library/4542>\
**Category:** Bugs\
**Tags:** visual-editor\
**Created:** [November 26, 2023, 3:00am UTC](https://forum.builder.io/t/alternative-method-to-bypass-a-bug-when-attempting-to-use-webp-images-with-the-asset-library/4542 "2023-11-26T03:00:07Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![juniorbotelho](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/juniorbotelho/32/3166_2.png) [@juniorbotelho](https://forum.builder.io/u/juniorbotelho)\
**Post date:** [November 26, 2023, 3:00am UTC](https://forum.builder.io/t/alternative-method-to-bypass-a-bug-when-attempting-to-use-webp-images-with-the-asset-library/4542/1 "2023-11-26T03:00:07Z")

</div>

_Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank._

**Builder asset link (bug)**  
[![](https://cdn.builder.io/api/v1/image/assets/23b4be777e63459982a9fa40855b98f0/5fa60106c0ec4610af5dec1b1896cc9c) ](https://cdn.builder.io/api/v1/image/assets/23b4be777e63459982a9fa40855b98f0/5fa60106c0ec4610af5dec1b1896cc9c)

**Builder public api key**  
23b4be777e63459982a9fa40855b98f0

**Detailed steps to reproduce the bug**  
Navigate to the asset library, upload a \*.webp image, and attempt to open the link URL in a browser tab or add the file to a component in the visual editor.

**Code stack you are integrating Builder with**  
NextJS

**Solution**  
You can temporarily resolve this bug by employing the “onChange” hook within the custom components option. By doing so, you can rewrite the asset URL by appending the “?format=webp” query at the end.

**Works fine 🎉**  
 ![works-fine](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/7/73e94b1c29d83cd1fa499ec69321d11ce287fc94.webp)

**Code example**

```ts
Builder.registerComponent(MyComponent, {
  name: "MyComponent",
  inputs: [
    {
       name: "thumbnail",
       type: "file",
       friendlyName: "Thumbnail",
       defaultValue: "/img/404.webp",
       onChange: (options: Map<string, string>) => {
         // e.g https://cdn.builder.io/api/v1/image...
         const fileUrl = options.get("thumbnail")
         if (fileUrl) {
           const url = new URL(fileUrl)
           // append the format query at the end
           // read more: https://www.builder.io/c/docs/image-api
           url.searchParams.set("format", "webp")
           options.set("thumbnail", url.toString())
         }
       },
     },
  ],
})

```