Builder.io images not displaying when using data binding

Technical Questions
1

Stack:
Next.js with an on-prem API.

Problem:
Builder.io images are not using the state I am setting outside of the visual editor.

Description:

I am fetching data in getServerSideProps and passing it to my component.
The state is showing up in the visual editor dropdown.
The state is defined in the page object before I pass it to the BuilderComponent.

The name and signature are both working as expected.
The ‘simage’ and ‘cimage’ are both obfuscated in the below example, but they are valid URLs for presigned s3 objects.

{
    "deviceSize": "large",
    "location": {
        "pathname": "/test/159d7c65-d7f5-42e3-xxxxxxxxxxxx",
        "path": [
            "test",
            "159d7c65-d7f5-xxxxxxxxxxx"
        ],
        "query": {}
    },
    "guid": "159d7c65-d7f5-xxxxxxxxxxxxxxxxx",
    "name": "asdfasdf",
    "signature": "asdfasdf",
    "simage": "https://xxxxx.s3.wasabisys.com",
    "cimage": "https://xxxxx.s3.wasabisys.com"
}

The bindings are set on whatever data structure you guys are using to structure the layout:

[
    {
        "@type": "@builder.io/sdk:Element",
        "@version": 2,
        "bindings": {
            //!!!!!Here is is
            "component.options.image": "var _virtual_index=state.simage;return _virtual_index"
        },
        "id": "builder-3425e8b41d0e447f8f5b11a15cdfb0da",
        "meta": {
            "bindingActions": {
                "component": {
                    "options": {
                        "image": null
                    }
                }
            }
        },
        "component": {
            "name": "Image",
            "options": {
                "image": "https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
                "backgroundSize": "cover",
                "backgroundPosition": "center",
                "lazy": false,
                "fitContent": true,
                "aspectRatio": 0.7041,
                "lockAspectRatio": false
            }
        },
        "responsiveStyles": {
            "large": {
                "display": "flex",
                "flexDirection": "column",
                "position": "relative",
                "flexShrink": "0",
                "boxSizing": "border-box",
                "marginTop": "auto",
                "width": "100%",
                "minHeight": "20px",
                "minWidth": "20px",
                "overflow": "hidden",
                "marginBottom": "auto"
            }
        }
    }
]

The image is not rendered and the tag has no source

<img role="presentation" loading="lazy" class="builder-image css-12153wi" sizes="100vw">

image

2 
// getServerSideProps return
return { 
    props: {
      page: page ? {
        ...page,
        data: {
          ...page.data,
          state: {
            ...page.data.state,
            name,
            signature,
            simage,
            cimage,
          }
        }
      }: null, 
    }
  };
3

Please disregard!

this was a bug with @builder.io/react@2.0.5
upgrading to 2.0.10 resolved the issue.

4

That is great news! :slight_smile: