Image Display Issue in Run Mode (Google Places Photo API) - CORS/302 Redirect

[netmala]

Can we access your project?

• 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 am experiencing a persistent issue with images not displaying in my FlutterFlow application's "Run Mode" (and "Test Mode"), specifically when fetching them from the Google Places Photo API. The images do appear correctly in the FlutterFlow UI Builder and also load perfectly when I directly paste the generated image URL into a web browser. but when I run the app on run mode no images appear!!

This suggests that the issue is not with the Google Cloud API key, its restrictions, or the photo reference itself, but rather with how FlutterFlow's Run Mode environment handles the API response, particularly regarding CORS and 302 redirects.

Here's a summary of the situation:

Issue: Images from Google Places Photo API do not display in FlutterFlow's "Run Mode" or "Test Mode."

Working Cases:

The image URL (e.g., https://maps.googleapis.com/maps/api/place/photo?...) loads successfully when pasted directly into any web browser.

The images display correctly within the FlutterFlow UI Builder.

Google Cloud Configuration Status (Confirmed Working):

API Key is active and valid.

Billing is enabled.

Google Places API is enabled for the project.

Application restrictions for the API key are currently set to "None" (I have also tried "HTTP referrers" with .flutterflow.io/ and https://app.flutterflow.io/*, but the issue persists).

API restrictions for the API key allow "Places API (New)".

The specific photo_reference being used is valid and functional.

Debugging Information from Browser Console (Run Mode):

The console repeatedly shows net::ERR_FAILED 302 (Found) errors for the photo requests.

Crucially, the primary error message is: "Access to XMLHttpRequest at '...' (redirected from '...') has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

This indicates that despite Google Cloud settings, the browser in FlutterFlow's Run Mode is not receiving the necessary Access-Control-Allow-Origin header in the API response (or the subsequent redirect response) to allow cross-origin requests.

issue7.txt
issue6.txt

Expected Behavior

Expected Behavior

When configuring an Image widget in FlutterFlow to display an image fetched from the Google Places Photo API using the Google Places Photo URL converter function, the image should consistently load and be visible across all preview and run environments. Specifically:

1. FlutterFlow UI Builder: The image should display correctly as shown in the design interface.
2. Web Run Mode (Test Mode / Run Mode): The image should load and render in the web browser environment of FlutterFlow's "Run Mode" and "Test Mode", without encountering network errors such as CORS policy blocks or redirect failures.
3. Direct URL Access: The raw image URL generated by the Google Places Photo API (and used within FlutterFlow) should load and display the image successfully when pasted directly into any web browser.

In summary, the expected behavior is for images retrieved via the Google Places Photo API to display reliably within the FlutterFlow application when launched in the web-based Run Mode, mirroring their correct display in the UI Builder and when the direct URL is accessed.

Steps to Reproduce

1. Create a FlutterFlow project that utilizes the Google Places Photo API to display images (e.g., in a ListView of search results).
2. Configure the Google Cloud API key as described in the "Troubleshooting Steps Already Taken" section above (especially setting Application Restrictions to "None" or adding FlutterFlow referrers).
3. Run the application in "Run Mode" in a web browser.
4. Observe that the images fetched from Google Places Photo API do not display, and check the browser console for CORS and 302 redirect errors.

Reproducible from Blank

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

Bug Report Code (Required)

blank

Visual documentation

issue7.txt
issue6.txt

Environment

- FlutterFlow version: 3.32.4
- Platform: Andriod and IOS
- Browser name and version: chrome
- Operating system and version affected: windows 11

Additional Information

No response

[TidoGarnier]

Greetings! I had the same issue. After a few hours testing image loading, I found this bug report! At least now I know it's a bug and not a development mistake.

[BBattsetseg]

Hi team,
We’re encountering a very similar issue in #6137, where images from Firebase Storage do not render inside Image widgets embedded within components in Test Mode, even though:

App Check is enabled only in Monitoring mode

The image URL is valid and confirmed working

It renders correctly in Preview Mode and Builder

Like this Google Places API issue, the root cause seems related to how FF Run/Test Mode handles image requests, especially with:

Redirects or internal caching

CORS headers

Nesting components

Please consider reviewing both issues together as they might stem from a shared underlying change in image rendering or request proxying in Run/Test Mode.

Thanks! 🙏

[sacautos]

I've found that I've also got a similar issue. Yesterday it was working fine. Today I get broken images. In my instance, the images are URLs of pictures hosted on DreamObjects - an S3 compatible CDN.

[Alezanello]

Hello!

Thanks for reporting this. It looks like this issue is a duplicate of the one already tracked here: Issue #6127.

Any updates or progress will be shared directly on that thread, so feel free to follow it for the latest information.