<StorageImage /> always displays alt text and loading failure status first!

[xunziheng]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Storage

How is your app built?

webpack

What browsers are you seeing the problem on?

Chrome

Which region are you seeing the problem in?

EU

Please describe your bug.

I am using StorageImage component in my project like this <StorageImage alt='logo' path={logoImageKey} />

When I load this page, I will see alt text and broken image first，then see the truly image I have setup.

I observed the data in the network and found that when the image request has not yet returned, the alt text is displayed instead of loading or blank. that is weird.

What's the expected behaviour?

show loading or blank instead of alt before image request return.

Help us reproduce the bug!

<StorageImage alt='logo' path={logoImageKey} />

set network to slow 3G

Code Snippet

// Put your code below this line.
<StorageImage alt='logo' path={logoImageKey} />

Console log output

No response

Additional information and screenshots

No response

[cwomack]

Hello, @xunziheng and thanks for opening this issue. We are going to mark this as a bug and will follow up with any additional questions or updates we have from here.