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

Bugs
1

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)

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 :tada:
works-fine

Code example

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())
         }
       },
     },
  ],
})
1 Like