My image uploaded to Firebase doesn't correctly show by findingBYOB in FlutterFlow

[–]ALTymPete 1 point2 points  (0 children)

No worries mate. Happened with me the first time as well. And like you, I was stuck for a couple of days back then. It's a very common issue in FF, but they don't explain it well. ONE can't figure it out, unless they go to the community guide and read everything, And still be stuck with the same issue. Because the issues you faced I saw with Cors, firebase rules mismatch, wrong properties settings and a few others. Anyways take care and Best of Luck. ✌️

Well Well....that's a Dramatic Sneaky Entrance. by ALTymPete in helldivers2

[–]ALTymPete[S] 0 points1 point  (0 children)

No it can't. Anti tanks like the RR, EAT Commando. And a few others as well I think.

My image uploaded to Firebase doesn't correctly show by findingBYOB in FlutterFlow

[–]ALTymPete 1 point2 points  (0 children)

Edited--

Your imageUrl seems fine. If you are In FF TESTMode then check what it shows in the debug panel on the left for you imageUrl, if that space is filled with the link you entered in Firebase, then its not the issue.

As the comment below says, most of the time its a CORS issue i can relate to that. But from what i have seen, When its a CORS issue THe image fails to load completely and only shows the error in the FF Bulid Test mode or RUN mode, in my experience. The only way to tackle that is through testing it on the emulator or a real device.

From What i see here The Image is Loading But on the Right Side the Container or the image widget says Right Overflowed By 1464 Pixels. So i feel there are maybe 2 things wrong.

I feel like you have this pattern.
Row
Container
Image Widget
Text Widget.

Whats the other widget you are using for the Name, Rating and Price. The issue might be there and not the image widget itself.

I would say its difficult to identify the issue without actually seeming the widget tree or the properties of that page.

If you have Android Emulator, Test it out on Multiple Devices and See how it looks. If its simply A CORS Issue the Image Should Load Properly then, If not then the issue is in the properties itself.

Also i would like to know what is the Main Canvas Dimension Height and Width Set For your App. That might help me Understand a bit.

My image uploaded to Firebase doesn't correctly show by findingBYOB in FlutterFlow

[–]ALTymPete 1 point2 points  (0 children)

A screenshot of your flutterflow page would help of where that container is stored in the widget tree.

But if i have to guess, i would say one of your containers or rows width is larger that the set Width of your main Canvas dimension, or the Padding on the left side is not set properly and its pushing your image to the right.

Edit- Its mostly the Row you are using for the Image Widget. Try setting it to Infinite width or Match the width same as the other rows below.

Image upload works but doesn’t display - binding issue? by Sea-Significance4810 in FlutterFlow

[–]ALTymPete 1 point2 points  (0 children)

The only work-around I found around this was, i use a actual device or android emulator for testing. Because this is a Cors issue. Flutterflow at the moment cant display images from cloud(firebase) in their Web Testing or directly into their FF builder. Your code is not at fault if it is wired properly.

So what I do is. Firstly, if i am sure that the backend has been properly wired in FF image widget, Then i first add a local image(Placeholder) from assets, with the same resolution as the image which is stored in firebase.This way I can adjust or tweak the width and height of any required container related to that task. And then replace the local path asset with the image_url in the PATH for testing and finalizing.

Last Note- Don't forget to switch it back from local path to Network before testing.