Assets not uploading / broken links

Hi,
Am enjoying Glitch and find it a great way to build stuff online!

Have an issue with when I upload assets (images .jpg and .png) to a project I’m getting an empty thumbnail and broken links.


I’ve tried various different filetypes and file sizes but have not been able to workaround this so asking for some help here.
Thanks,

hi! i wonder if your internet provider or a browser ad blocker may be blocking the cdn.glitch.global domain - if you copy the url of the asset and go to it directly, but replace .global with .com, does it then work? you should email support@glitch.com and let them know what’s going on and let them know who your internet provider is and if you have any ad blocker extensions

2 Likes

Hi Jenn, I wrote to support and am waiting to hear back. Replacing the url of the assets, as you suggested, for me didn’t make any difference. I don’t run ad blockers and asset uploads previously worked just fine. The missing asset behavior seems to be happening across my account and is not isloated to one project. Thanks for your help :smiley:

I have created a code to replicate what you are trying to do. Your problem is most likely an error in your index.html code. Or you most likely don’t have something online that is blocking you from viewing the image in your code.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Image Placeholders</title>
  <style>
    body {
      background-color: #0b060e; /* Dark black/purple like your screenshot */
      color: #ccc;
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .container {
      display: flex;
      gap: 40px;
    }

    .image-box {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .image-frame {
      width: 200px;
      height: 200px;
      border: 1px solid #aaa;
      background-color: #1e1e1e;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }

    .image-frame img {
      max-width: 100%;
      max-height: 100%;
    }

    .filename {
      margin-top: 10px;
      font-size: 14px;
      color: #aaa;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="image-box">
      <div class="image-frame">
        <img src="https://cdn.glitch.global/YOUR_PROJECT_ID/image_6483441-17.jpg?v=SOME_HASH" alt="Image 1">
      </div>
      <div class="filename">image_6483441-17.jpg</div>
    </div>

    <div class="image-box">
      <div class="image-frame">
        <img src="https://cdn.glitch.global/YOUR_PROJECT_ID/image_6483441-17test.png?v=SOME_HASH" alt="Image 2">
      </div>
      <div class="filename">image_6483441-17test.png</div>
    </div>
  </div>
</body>
</html>

change out the https://cdn.glitch.global/YOUR_PROJECT_ID/image.png?v=HASH with the image url you get from the image(s) you want in the assets section.

This is my second time trying to put this in.

1 Like

Thanks Luke! So I started a totally new project and copied in your code, thanks, but unfortunately the Assets don’t upload (I get an empty Asset - no picture, see image attached), and when I copy the generated link of the uploaded Asset into the code the Asset picture doesn’t show up (worth trying to isolate the cause of the problem). Thanks again!


Is it possible that the png is too big, seeming how glitch has a storage limit that’s the first thing that comes to my mind. It could possibly be something in your script that is blocking it because I am using just the HTML.

This is what my friend that is helping me on this situation because this is now starting to affect me.

Can you check that the image is saved in a compatible format. You’re using a PNG file, which is supported in HTML. Could you verify that that file isn’t corrupted.

Can you edit the code to where it is <img src="assets/${your_image_here}.${file_type}" alt="Image Description"> Replace ${your_image_here} with your image name and replace ${file_type} with your file type in this instance .png.

If your on the free tier, you might be exceeding the maximum storage limit. (Depending on what your plan is)

Your image could also not actually be uploading. Sometimes, they might not appear due to upload errors.

You could try clearing your browser cache or try accessing your project in an incognito window to rule out caching issues.
By doing these you can analyse what is actually going on.

I will be working on a work around on this issue.

Thanks for your input! Yeah, I tried those things, and I know that it’s not happening because the file is too big. I have another project where it was previously working, but then subsequently the Assets dissapeared and upload stopped working. I tried small files, bigger files nothing worked.

I signed up for the paid service about two weeks ago, so should have space.

Dissapointingly, I haven’t had a response from support.

Thanks again!

What is the exact code your using to direct the html code to the image? I have just been testing the assets/imagename.ong and that wasn’t working at all.

Hi Luke,
This behavior occurs even when I open a new empty project, so, based on this it seems unlikely related to code in any single project.
Thanks,

If you right click the broken thumbnail and copy its image link, does that URL work in a regular old browser tab? The asset manager shows automatically generated thumbnail of your images, rather than showing the images themselves, so there’s a few options here:

  1. thumbnail generation’s failing, but that seems unlikely given that they work fine for everyone else, and the code isn’t tied to “specific users”, it’s just “image goes in, thumbnail comes out”. It only cares about the user being logged in.
  2. you’re not getting the correct URL back for thumbnails. Although that’s also unlikely given that that code also doesn’t particularly care about who’s calling it. Again only caring about the fact that you’re logged in.
  3. something is blocking your access at the CDN itself, in which case it’ll be helpful to know what response headers you’re getting when you specifically request those thumbnails (i.e. the headers as found in the network tab in your dev tools)
  4. something is blocking your access to the CDN, e.g. either your router or your ISP or your national DNS system is blocking the CDN domain. Seeing headers for that would also be necessary.

So one thing you can do, although I’m pretty confident it won’t make a difference, is explicitly log out from Glitch, then log back into Glitch, then reload your project. If that doesn’t work, please report on what happens when you try to load a thumbnail’s URL in a tab of its own.

Hi Pomax, thanks for your response, it led me to investigate the DNS and as part of this I switched on a VPN and the asset images came back. I switched to Cloudflare DNS and the assets are back again now.

Do you know why that happened?

Sounds like your DNS cache got invalidated, so without digging I’m going to guess either your home router or your OS didn’t like the CDN domain for some reason (lots of possible reasons) but it never bothered to check whether that reason still applied until you forced a change by using that VPN.

Thank you so much, really appreciate your help on this.

1 Like