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

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

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

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:

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
         const fileUrl = options.get("thumbnail")
         if (fileUrl) {
           const url = new URL(fileUrl)
           // append the format query at the end
           // read more:
           url.searchParams.set("format", "webp")
           options.set("thumbnail", url.toString())
1 Like