[BUG] Default Image is missing when image is specified as dynamic property.

[visibleajay]

Description

Default Image is missing when image is specified as dynamic property.

Video In Action

Important Details

• Version: Cloud
• OS: MacOs 10.14.6
• Browser: Firefox 80.0.1 (64-bit).

[hetunandu]

Solution: Update the logic of the background image to handle for cases where props.imageUrl is undefined

Need more guidance while working on a solution for this? Feel free to mention me in a comment on this issue and I'll be happy to help you out 😄

[visibleajay]

Hey Hetu, Checked it and found out that src={this.props.imageUrl} is null when a dynamic property is provided with no values attached to it as shown in the example.
If we could check and provide any non-zero value when imageUrl is empty than it would trigger the img onError and onLoad method which subsequently would updates the imageError var updating the background-image attached to the StyledImage Component.

I propose updating src with {this.props?.imageUrl?.length > 0 ? this.props?.imageUrl : "default"} to make it work in the above case. Would surely like to know your views on this.

[hetunandu]

Hi Ajay, that's a great insight! Glad to see you get so familiar with the codebase 🙂 while the change you suggest will work, the best place to handle something like this would be the Image Widget where you could update it with

imageUrl={this.props.image || ""}

The reason I would do a change over there is that ImageComponent should receive the string prop as defined in the type. I would avoid handling this via a length check of a null value.

Having said that, a more advanced solution for this would be to create a new validator that would always parse this value as a string while also checking for base64 and url values, but that is out of scope for this issue.

Are you planning to create a PR for this? If so i'll assign this to you.