Images not Loading

[mgmccane]

I'm having issues getting the images to load on my studies. Any images that are contained in the spreadsheet are loading on firebase just fine, but with the study itself I get the error message "Could not load StudyImage from [file location]".

Any help would be greatly appreciated.

[Sothatsit]

Hi @mgmccane, to clarify, do you mean that you can upload the Excel file that contains the images without issues, but when opening the study the images always fail to load?

I'm not exactly sure what would cause this. It could be a permissions issue, or you could be hitting your image download budget (although if only you are testing the study, this is unlikely).

If possible, could you provide the following information:

1. The full error message if it includes any additional information after "Could not load StudyImage from". For example, it could show something like "Could not load Study Image from [file location] (403)". That 403 is important to determining what caused the error.

2. The error that shows up in your browser's JavaScript console. Different browsers have different methods of accessing this console, but it is usually labelled as a developer tool. When the image fails to load, an error should be printed to this console, usually in red text.

Alternatively, if you could provide a link to your study, then I could try to load the study myself to find the information above. If you want to share the link without making it public on this issue, then you could also send me a message on Slack (Padraig Lamont).

Thanks,
~ Paddy L.

[mgmccane]

Sure, the link to my study is: https://the-media-proj.web.app/study/xktl3qvb5dfzyns2
The uploaded study at the moment is the same as the template - I'd wanted to check that it was working properly before adjusting and making changes.

[Sothatsit]

Sure, the link to my study is: https://the-media-proj.web.app/study/xktl3qvb5dfzyns2 The uploaded study at the moment is the same as the template - I'd wanted to check that it was working properly before adjusting and making changes.

Hi @mgmccane, it appears that the CORS settings are invalid for your project. These should be automatically configured when installing the Misinformation Game, but this may have been missed if you invoked the deploy script with the --skip-cors option.

Alternatively, you may have put in the wrong domain when asked by the deploy script. It should have asked you Please enter the URL of your project as a .appspot.com domain (e.g. misinformation-game.appspot.com). For this, you should have entered the-media-proj.appspot.com.

Could you try deploy the Misinformation Game again, to see if either of these changes fixes your issue?

Let me know if you are still running into issues after trying again, and if so I can try to help you to manually configure the CORS settings in your Google Cloud.

[BrettlandC]

I am actually having a similar issue! The JavaScript Console gives me this string of errors:

Access to XMLHttpRequest at 'https://firebasestorage.googleapis.com/v0/b/projectsimulation-5374b.appspot.com/o/Admins%2FUjtPI6TeA6ezBoZnVqZVyausmoz2%2FStudies%2F1uqi8dcw9rwvwfs7%2FP19.jpg?alt=media&token=7b2dbfb1-c95f-4d79-9a1c-5e400ddb0da1' from origin 'https://projectsimulation-5374b.web.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
promises.js:13 Error when running retry-looped operation:

Error when running retry-looped operation: Error: Could not load StudyImage from /Admins/UjtPI6TeA6ezBoZnVqZVyausmoz2/Studies/1uqi8dcw9rwvwfs7/P19.jpg
at XMLHttpRequest. (getFromDB.js:125:32)

Error: Could not load StudyImage from /Admins/UjtPI6TeA6ezBoZnVqZVyausmoz2/Studies/1uqi8dcw9rwvwfs7/P19.jpg
at XMLHttpRequest. (getFromDB.js:125:32)
firebasestorage.googleapis.com/v0/b/projectsimulation-5374b.appspot.com/o/Admins%2FUjtPI6TeA6ezBoZnVqZVyausmoz2%2FStudies%2F1uqi8dcw9rwvwfs7%2FP19.jpg?alt=media&token=7b2dbfb1-c95f-4d79-9a1c-5e400ddb0da1:1

    Failed to load resource: net::ERR_FAILED

getFromDB.js:125 Uncaught (in promise) Error: Could not load StudyImage from /Admins/UjtPI6TeA6ezBoZnVqZVyausmoz2/Studies/1uqi8dcw9rwvwfs7/P19.jpg
at XMLHttpRequest. (getFromDB.js:125:32)

I'd appreciate being involved in the fix for this! Thank you!

[Sothatsit]

I am actually having a similar issue! The JavaScript Console gives me this string of errors:

Access to XMLHttpRequest at 'firebasestorage.googleapis.com/v0/b/projectsimulation-5374b.appspot.com/o/Admins%2FUjtPI6TeA6ezBoZnVqZVyausmoz2%2FStudies%2F1uqi8dcw9rwvwfs7%2FP19.jpg?alt=media&token=7b2dbfb1-c95f-4d79-9a1c-5e400ddb0da1' from origin 'projectsimulation-5374b.web.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. promises.js:13 Error when running retry-looped operation:

Error when running retry-looped operation: Error: Could not load StudyImage from /Admins/UjtPI6TeA6ezBoZnVqZVyausmoz2/Studies/1uqi8dcw9rwvwfs7/P19.jpg at XMLHttpRequest. (getFromDB.js:125:32)

Error: Could not load StudyImage from /Admins/UjtPI6TeA6ezBoZnVqZVyausmoz2/Studies/1uqi8dcw9rwvwfs7/P19.jpg at XMLHttpRequest. (getFromDB.js:125:32) firebasestorage.googleapis.com/v0/b/projectsimulation-5374b.appspot.com/o/Admins%2FUjtPI6TeA6ezBoZnVqZVyausmoz2%2FStudies%2F1uqi8dcw9rwvwfs7%2FP19.jpg?alt=media&token=7b2dbfb1-c95f-4d79-9a1c-5e400ddb0da1:1

    Failed to load resource: net::ERR_FAILED

getFromDB.js:125 Uncaught (in promise) Error: Could not load StudyImage from /Admins/UjtPI6TeA6ezBoZnVqZVyausmoz2/Studies/1uqi8dcw9rwvwfs7/P19.jpg at XMLHttpRequest. (getFromDB.js:125:32)

I'd appreciate being involved in the fix for this! Thank you!

Hi, have you tried the following to fix the issue?

Modified from comment above: It appears that the CORS settings are invalid for your project. These should be automatically configured when installing the Misinformation Game, but this may have been missed if you invoked the deploy script with the --skip-cors option.

Alternatively, you may have put in the wrong domain when asked by the deploy script. It should have asked you Please enter the URL of your project as a .appspot.com domain (e.g. misinformation-game.appspot.com). For this, you should have entered projectsimulation-5374b.appspot.com.

Could you try deploy the Misinformation Game again, to see if either of these changes fixes your issue?

Let me know if you are still running into issues after trying again, and if so I can try to help you to manually configure the CORS settings in your Google Cloud.

[BrettlandC]

Hi!

So, I never adjusted the cors setting, and I actually followed the same steps as last time, where I copy and pasted the project id (like you listed above) for my project and simply added the ".appspot.com" at the end. However, last time an error message displayed afterwards which I can no longer remember, and further attempts to redeploy had a similar outcome. I do not remember what this error was, but somehow my website was still setup (which surprised me). However, redeploying it this time resolved the issue, although I am not entirely sure why. I also had to delete and re-download python, as my installation couldn't find my original download of python (like we discussed in my other post). Ultimately, I was successful!

[Sothatsit]

Hi!

So, I never adjusted the cors setting, and I actually followed the same steps as last time, where I copy and pasted the project id (like you listed above) for my project and simply added the ".appspot.com" at the end. However, last time an error message displayed afterwards which I can no longer remember, and further attempts to redeploy had a similar outcome. I do not remember what this error was, but somehow my website was still setup (which surprised me). However, redeploying it this time resolved the issue, although I am not entirely sure why. I also had to delete and re-download python, as my installation couldn't find my original download of python (like we discussed in my other post). Ultimately, I was successful!

Hi, I'm glad to hear of your success!! Perhaps the CORS issue was due to the billing issue that you mentioned. Thanks for persevering, and I hope the Misinformation Game works well for your research! If you have any questions in the future, please reach out!