Images uploaded to asset file not working

I’m trying to upload an image to my assets folder. Any image. Nothing is working. I can’t upload png, jpg, gif, etc. Whenever I upload an image of any kind, it acts like it’s uploading, then gives me a broken icon. And images that I had successfully uploaded previously are now just giving me broken icons, too. They’re all small images, the biggest is just under 500 kb. Please help, this is for school and I’m getting really frustrated. Thanks!

Hey @nj7ducks,

I’m having no problems uploading assets to my images, but can you tell me how you figured out that the images were broken? Also, can you try drag and dropping the images to the assets?

This is what it looks like when I go into my asset folder:

And when I use the code img src=“whateverpicturehere” with brackets <>, I just get the broken icon on the site. The profile picture was working previously. It was when I went to upload the rafting picture that I realized nothing was working anymore.

This happens whether I browse & upload or drag & drop to upload.

okay, let me guide you through assets

each asset you upload is not only uploaded onto your project’s disk but onto the glitch CDN, this is how the images are added to your site through the link generated.

For example:

<img src="https://cdn.glitch.com/0245b532-5d68-41d4-b409-220d0441f7f2%2Fbootstrap-4-example-cover.png?v=1517245478699">

but I need to know:

  • what was the size of the image?
  • what format? (JPEG, BMP etc)
  • was a link generated?

if you didn’t get a link then there might be something wrong with the CDN itself.

message me back and I should have a solution

1 Like

hmm, I think there may be something wrong with the CDN

i’ll message a developer and see what they can do

File names, types, sizes, and links generated:
rm2.png (72kb) https://cdn.glitch.com/5ceeabc2-5120-4321-b862-e4e3870b6a68%2Frm2.png?v=1579117302691

profile.jpg (423kb) https://cdn.glitch.com/5ceeabc2-5120-4321-b862-e4e3870b6a68%2Fprofile.png?v=1579117330992

Could it be CORS that’s blocking all these images?

I’m sorry, I don’t know what CORS or CDN are. I’m very new to coding - 1st semester. Or I’m very old. I started coding in 1998 but haven’t touched it since 2000, so everything is brand new again.

1 Like

That’s okay! I’ll tell you:

  1. CDN A CDN stands for content delivery network. According to it’s Wikipedia article, for a better definition, a CDN “is a geographically distributed network of proxy servers and their data centers.” Essentialy, it can be used for storing data such as images, medias and also scripts and stylesheets. So you can upload stuff (like images to be used in your website) to public CDNs such as Cloudflare and you get a link which you can add in your website. In Glitch, images and other media that are uploaded to the “Assets” section are automatically uploaded to Glitch’s CDN (yeah, they have one) and that’s how you get the URL https://cdn.glitch.com/5ceeabc2-5120-4321-b862-e4e3870b6a68%2Frm2.png?v=1579117302691. Notice the cdn.glitch.com part in the URL. Here, what @17lwinn meant was that, something might be wrong with the CDN.

  2. CORS It stands for Cross-Origin Resource Sharing. It’s a security policy that prevents a website of a domain (Example: domainA.com) to access/load images and scripts from a totally different domain (Example: domainB.com). The CORS is actually a safety precaution implemented in browsers and if an image gets blocked due to CORS, it usually results in an error and in case of images, you get a broken image icon.

Hope this helps!

1 Like

@khalby786 is right, CORS would block the image, maybe you could try uploading to the ‘public’ folder on your project? that would mean all images coming being put onto the site come locally

hi @nj7ducks - can you let me know the name of your project? i can see if your assets are being loaded properly or not - it may be the case that your firewall or internet provider or a browser extension may be blocking the cdn.glitch.com url - do you have the same issue if you try to edit in an incognito browser window?

My project is jshaw-wdd130-winter2020. Yes, I have the same problem when incognito.

Thanks for letting us know @nj7ducks

When I check your assets, they appear to display properly. Like Jenn said, this may be a firewall issue.

Can you try clicking on this direct link to one of your assets and then let us know what your browser shows:
https://cdn.glitch.com/5ceeabc2-5120-4321-b862-e4e3870b6a68%2Frm2.png?v=1579117302691

Nothing loads, I get this error message:

This site can’t provide a secure connection
cdn.glitch.com sent an invalid response.
[Try running Windows Network Diagnostics](javascript:diagnoseErrors()).
ERR_SSL_PROTOCOL_ERROR

@nj7ducks What country do you live in? Or, what is your ISP? It may be that.

I’m in the USA and have Xfinity.

Hmm, it works for me.

Right now the pics on my project are being hosted via Image Shack because I had to submit the page for a grade.

1 Like