[SOLVED] Sprite LoadFromUrl: Url image in Firebase Storage

I have a very simple onLoad event that sets a Sprite instance image using "load from url". It works great if the image is hosted on localhost server, but doesn't work at all if the image is hosted in Firebase Storage. I can paste the url in Firefox or Chrome and the image loads fine. Just doesn't work in C3 code.

Is anyone using any hosted file storage and has this working? I'm not sure what I can do to fix.

Here is the url I'm trying. Click this and LMK if you see my handsome face...

https://firebasestorage.googleapis.com/v0/b/pic-quiz-puzzle-game/o/profile_50.jpg?alt=media&token=510f44e4-0df3-4ba2-83d2-3b34acd970e7

Look inside the console and check if any error could be keeping you from loading your image by URL.

Look inside the console and check if any error could be keeping you from loading your image by URL.

Thanks for replying Magistross! Yeah I wish there was an error in the console. Not only is the console 100% error free, you can actually see that C3 IS loading the image from Firebase Storage.

Here is a pic of my network tab. Note the 200 jpeg fetch near bottom...

https://firebasestorage.googleapis.com/v0/b/pic-quiz-puzzle-game/o/C3%20Loads%20Image%20But%20Wont%20Set%20Sprite%20Url.PNG?alt=media&token=cce5e1b4-df54-4868-978f-328140eb6f08

So C3 gets the image, it just refuses to set the Sprite image. I'm thinking this one is a bug.

NOTE: When I put the image in my localhost plugin dev server, in static content, then load that in C3 code, it works fine. So it must be something about the url it's choking on. Maybe? I'd love to find out soon

I'm getting this error :

"Failed to execute 'texImage2D' on 'WebGL2RenderingContext': The cross-origin image at https://firebasestorage.googleapis.com/ ... 34acd970e7 may not be loaded."

And as you pointed out, the image is correctly loaded with GET but an exception get thrown anyway when you try to display it with the sprite.

I'm getting this error :

"Failed to execute 'texImage2D' on 'WebGL2RenderingContext': The cross-origin image at https://firebasestorage.googleapis.com/ ... 34acd970e7 may not be loaded."

And as you pointed out, the image is correctly loaded with GET but an exception get thrown anyway when you try to display it with the sprite.

Where do you see this? My FF console does not show this. I still think this is bug. C3 is retrieving the image, by url, from Firebase Storage. We can clearly see that happening. C3 simply refuses to set the sprite image.

I'm getting this error :

"Failed to execute 'texImage2D' on 'WebGL2RenderingContext': The cross-origin image at https://firebasestorage.googleapis.com/ ... 34acd970e7 may not be loaded."

And as you pointed out, the image is correctly loaded with GET but an exception get thrown anyway when you try to display it with the sprite.

Are you using Firefox or Chrome? Console should show same info regardless, but thought I'd ask.

I'm using Chrome version 57.0.2987.110

Here's a screenshot.

Wow. Thanks for posting Magistross

Ok so we have some missing, or at the very least, high variance of visible console errors based on the browser you're using. I can't use Chrome because various C3 UI elements do not render correctly (not even usable render) in latest Chrome. Not sure why that is for me. Hopefully Scirra will figure this out.

But anyway, using Firefox, it appears I'm missing console error info.

Considering the error you see, is this something Scirra can fix maybe?

Here are the headers and response I see in Firefox console. Can anyone see an issue in either of below?

SIDE NOTE: The Scirra forum app seems to have no trouble loading images from Firebase Storage. Can we get C3 to do this too please?

I believe everything is working as intended. You probably just need to configure CORS in your Firebase settings. (Which I know nothing about, but this seems informative.)

Magistross You are a gentleman and a scholar my friend. It works now. I owe you a beer <img src="{SMILIES_PATH}/icon_e_smile.gif" alt=":-)" title="Smile">

For next person searching on Firebase Storage issues: You have to install the Google Cloud SDK...

https://cloud.google.com/sdk/docs/

Then create a .json file like (I put mine in C:\Temp\ folder so it would be easy to access in cmd windows)...

[
    {
      "origin": ["https://preview.construct.net", "https://editor.construct.net"],
      "responseHeader": ["Content-Type"],
      "method": ["GET", "HEAD"],
      "maxAgeSeconds": 3600
    }
]
[/code:1j8a7kiu]

Then run [u]gsutil cors set[/u] like...

[u][b]gsutil cors set C:\Temp\cors-json-file.json [url=gs://my-storage-bucket/]gs://my-storage-bucket/[/url][/b][/u]

Glad to help.

Don't forget that you will need to add another URL when you publish your app. Or you could also use the "*" value to allow any origin.

Glad to help.

Don't forget that you will need to add another URL when you publish your app. Or you could also use the "*" value to allow any origin.

You're right, I will do that. Thanks again

Related note: Scirra needs to plugin some kind of tip/payment system on this forum so we can send "tips" to super helpful people like you. I wish I could send a buck or three every time some one takes time to help me here. It should be integrated into the forum (not forced out in an external app) so it's super quick and easy to do

Perhaps we could use Square Cash https://cash.me or something. It's really easy to setup and use.