Images stored in the database cannot be displayed in production environment

[Miyata19830610]

Can we access your project?

• [X] I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

I set up the database and widgets while watching tutorials on YouTube, but in the test environment, the images were displayed, but when I published them on the web, the images became invisible.

I checked to see if there were any errors in the setting method, and there appears to be no error.

What should I do in this case?

Expected Behavior

A configuration error occurred when configuring the database from the widget.

Steps to Reproduce

1. Create a page
2. Insert list view widget
3. Put a container widget in the list view and put an image widget inside it
4. Specify database collection for list view widget
5. Specify the database image storage destination for the image widget path

that's all.

Reproducible from Blank

• [X] The steps to reproduce above start from a blank project.

Bug Report Code (Required)

IT4okuflsIp2rs9J1s/IdfoxnSQUG1t+U78njspOFDIbGJzwBIh+duPsXFpucNOrTWlhHE6bgn8y0tbmvvHXUfc5Fw+sQKpk1pN2YAGUTXq8RpCJEsywRn9QHdlhC2qs0cGnux1AXc9vLnwRwDqIfemsaD/DJ5u/Zwh9f6PHaOI=

Visual documentation

本文を追加.pdf

Environment

- FlutterFlow version: 4.1.60
- Platform:arc
- Browser name and version:1.47.1
- Operating system and version affected: macOS Sonoma 14.5

Additional Information

No response

[rzambroni]

Hey @Miyata19830610, thanks for the report. Quick question, do you see any logs on your browser console? (f12)? if so, can you please share them.. hopefully, we have some clues there that can help us troubleshoot.

Have you tested on a real device or simulator to see if the issue is persistent there or only web-specific?

[Miyata19830610]

In the test environment, it is displayed, so it may be unique to the web, but as for the app, it has not been officially deployed, so I cannot confirm it.

Here is the console log.

[nvimalraj]

In the test environment, it is displayed, so it may be unique to the web, but as for the app, it has not been officially deployed, so I cannot confirm it.

Here is the console log.

CORS error can be resolved by going to Project setup -> Platforms -> Advanced Web Settings -> CORS proxy for images -> Deploy with Firebase

Or if you can access the google cloud console, you can setup your own CORS.json directly. ==> This is more efficient while the above option is more convienent (and may incur cost as that uses cloud function).

[Miyata19830610]

thank you.

I changed the settings as shown in the image, but the situation remains the same.

[rzambroni]

The problem blocking the image is still the CORS error. If you are still experiencing the issue please contact our support team so they can take a look a little more in-depth to your project and configs.

You can do that either by email: support@flutterflow.io or using the in-app chat inside of FlutterFlow.

[Miyata19830610]

thank you for your kindness.

I contacted the support team and they asked me to post again on GitHub, so I will do so.

[github-actions[bot]]

This issue is stale because it has been open for 7 days with no activity. If there are no further updates, a team member will close the issue.