Subject: Schema inconsistency in Image Component (JS Source)

💬 App Building
1

My goal: Display a base64 image using a JavaScript object in the Image source field of an Image component, following the official documentation.

Issue: There is a mismatch between the documentation, the component's validation error, and the actual HTML output.

  1. The documentation says the property for the MIME type should be data.

  2. The component error message says the property should be type.

  3. Even when providing data: "image/png", the resulting HTML src is broken: src="data:image/;base64,...". The subtype (png) is missing because the component seems to be looking for a type property that it then fails to map correctly to the Data URI string.

Steps I've taken to troubleshoot:

  • I followed the documentation and used data: "image/png". The component accepts the object but renders a broken image because the src becomes data:image/;base64... (missing the "png" part).

  • I tried changing the property name to type: "image/png" as suggested by the component's red error tooltip.

  • In both cases, fails to correctly concatenate the full Data URI, leaving the MIME type incomplete in the DOM.

Additional info:

  • Schema provided:
{
"name": "test.png",
"data": "image/png",
"sizeBytes": 3000,
"base64Data": "iVBORw0KGgoAAA..."
}

Resulting HTML (Inspect element): <img src="data:image/;base64,iVBORw0KGgoAAA..." /> (Notice the semicolon immediately after image/, skipping the format).

image

1 Like
4

Hey @Miguel_Gonzalez_Herrera - I just shared an update on this issue over here. Take a look and let me know if you have any questions!

1 Like