Image Not Showing (Using A-Frame) - What's The Issue?

Glitch Help
1

Hi! I am using A-Frame to display an image in VR using Glitch. I am trying to display a specific image stored using AWS and is not registered as a Glitch asset in the project. Below is the code. Any idea why it is just appearing as blank white instead of the image? There seems to be nothing wrong with the image itself:

<a-image src=“https://s3.amazonaws.com/vrthday-images/Juicy-yellow-lemon-on-a-white-background-isolated_iStock_63046779_MEDIUM.png” position=“-4.3 3.2 -9.29" rotation=“0 0 0” width=“2" height=“2”>

Any help is appreciated!! By the way, the AWS is configured with CORS headers already.

Thanks,
Ben

2

Hey @GroovyMammoth, welcome to the Glitch forum!

What do you see when you load that image in an incognito window? Is it possible it’s loading for you in your browser but inaccessible to Glitch?

3

Hi @cori!

It’s totally showing in the browser (even incognito) but just not in Glitch. I don’t want to register the image as an asset but rather just reference the AWS url. For some reason it shows up white (any image shows up white from AWS).

I’m pretty stuck so anything helps!

Thanks again!
Ben

4

Hi @cori,

Just wanted to check in again and see if you had any ideas!

Thanks,
Ben

5

Hey @GroovyMammoth when I try to load that S3 URL, I get

<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>20D5557B90A309C8</RequestId>
<HostId>
vS5n+HkVB78Yadvr2o+bh72jLENaviyECoGtSbL0tOhFTYxzwOMPVhiHkqum/cuzg3rFWgDnfas=
</HostId>
</Error>

which suggests to me that permissions might be an issue. Can you check on that?

6

Hi @cori, I think the link you clicked above was faulty because it includes the ending " in the highlighted link. Here is the link to the photo. I don’t seem to get the error.

You can try it for yourself. Posting it in your browser looks fine, but using it in an results in a white blank image.

Let me know what you think!
Ben

7

Hey @GroovyMammoth that’s probably right; sorry for the confusion.

Can you provide your project name so someone can take a closer look?

8

Hi @cori,

Here’s a link to my project:

https://equal-whippet.glitch.me/

There you can view the VR project. The images are placed in frames and you can see that they are all blank white, when they should depict the photo of the lemon. The links to the images are stores in the project’s .env file. Please ignore any assets found in the Glitch asset file.

Thanks for the help – looking forward to getting this resolved! Let me know if you have other questions.

Thanks,
Ben

9

unrelated, but those are some cute pictures in your assets :smile:

10

Hi @cori,

Just wanted to thank you again for the support. Let me know if you need any other info from me. If we figure out how to get these images to show, it would be a lifesaver!

Ben

11

Hey @GroovyMammoth I have no idea what happened, but after fiddling around and reloading the app a few times I’m now seeing the images here, both in your project and in a Remix. I take it you’re still seeing the issue?

I’m also seeing quite a few errors in the browser console - quite a few 404 errors and some mixed-content issues, among others. If I were troubleshooting this I’d probably try to clean those up before digging into other problems, since those sorts of errors can cause unexpected behavior and make it hard to troubleshoot precisely

12

Hi @cori,

Thanks for taking a look! I’m surprised that you are seeing the lemon images in the VR frames – I have tried reloading a bunch of times but still blank white for me.

I also noticed those errors and agree it would be smart to clean those up because of potential unexpected behavior.

Additionally, I know that AWS needs to have CORS headers enabled in order for assets to load in Glitch. I believe I have enabled this, but will recheck because perhaps the code for this is missing something.

If you have any other ideas, do let me know! Thanks so much once again.

Ben