Report Blog Entry
# Images not loading; My temporary solution.
## tl;dr
Spacehey wraps embedded images in a proxy that causes certain hosts to not load.
This is due to cross origin issues.
My solution was to find hosts that still work despite this:
- links that work (for me): pinterest, dropbox, wikipedia.
- links that may not work: tumblr, imgbb, cursors-4u, giphy, blinkies, imagekit-io, catbox-moe.
Pinterest worked at first but was tedious to setup.
Dropbox works better as long as you replace "www.dropbox.com" with "www.dl.dropboxusercontent.com" in your image link.
Read more for details.
## too much info / i like it here
I recently made a page here on Spacehey. It looked like a cozy experience based on the intricate profiles I've seen. I've spent a decent amount of time building a Neocities page, but felt it lacked the social bridges of a premade friend system with im, blogs and such. Spacehey seems like an easier place to customize since most of the page is already built and you can simply focus on css styling.
## the problem
After starting my own, I quickly noticed there were often issues loading images on profiles. I did some searching and found it's a common complaint recently. I'm not sure for how long or when it started.
With no readily available solution, I spent a great deal of time inspecting and debugging in chrome devtools; I'll try not to get too technical. I looked through various profiles for instances where images worked fine. I found that SpaceHey wraps embedded content in a proxy of sorts. You can see this when you check the source of images on a profile.
## for example:
- I initially tried using ImgBB to host an img:
src="https://i.ibb.co/wZwmNDLQ/crow-rabbit-mist-gb-none.png"
- When I checked my page, the link was changed to:
src="https://external-media.spacehey.net/media/s2IUFiiAY4dgri7XxXb32dZwKlOZdrbzfD_oGASs0Ngk=/https://i.ibb.co/wZwmNDLQ/crow-rabbit-mist-gb-none.png"
You may notice the 1st link loads fine in a new tab, but the 2nd link may not at all.
Inspecting can show various issues:
- 504 Gateway Timeout
- (CORB) or "Cross-Origin Read Blocking"
- (CSP) or Content-Security-Policy
It's essentially to protect from sensitive data leaking between sites.
## possible solutions
1. I believe it should be possible to override the response headers manually via the network tab of devtools or with Chrome extensions like Requestly or ModHeader. After trying all of these options for hours and likely missing some little detail that would make it work, I decidedly settled (after a nap) on using a different image host.
2. I noticed that pinterest links with the prefix "i.pinimg.com" were loading fine on my end. So I tried reuploading my image to pinterest but found another issue: it auto cropped the image and editing was tedious if not impossible. It could be a bug with some browsers. I then instead tried uploading via url, not locally, which worked.
## to reiterate:
1. I uploaded an image locally to imgbb,
2. opened the image,
3. right click, copy image address (prefix is "i.ibb.co"),
- should look like this: "https://i.ibb.co/wZwmNDLQ/crow-rabbit-mist-gb-none.png"
- (do NOT use "share, copy"; this will NOT work, "https://ibb.co/Q7CwFscH")
4. created a pin on pinterest using
- "save from url" and pasted the above link,
- created a board to save it to,
5. opened the image,
6. right click, copy image address (prefix is "i.pinimg.com"),
- should look like this: "https://i.pinimg.com/736x/36/eb/74/36eb7467df96f58e47815ce5ddeb790c.jpg"
- (do NOT use "share, copy link"; these will NOT work, "https://pin.it/5YZ8JeCK7", "https://www.pinterest.com/pin/871516965405109411/").
7. lastly, I used the direct link as my "img src" on Spacehey.
## more issues
This was not a perfect solution.
- pinterest converted my png to a jpg; worse quality 🙄
- uploads must be at least 200 x 300 pixels; but my 88 x 31 buttons! 😮
- and it can't upload gifs! nyooooo! 😭
## another solution
I later noticed dropbox links worked but only with a certain format.
- Once uploaded, "share, copy link" will NOT work with this prefix:
"https://www.dropbox.com"
- but "right click, copy image address" will NOT work either with this prefix:
"https://previews.dropbox.com/p/thumb/"
- By sheer luck, I found an older format that DOES work using the prefix:
"www.dl.dropboxusercontent.com/"
## this works for me
So using:
- "share, copy link" to get this:
"https://www.dropbox.com/scl/fi/ckgmn9rr2pzwcedllmjgn/crow-rabbit-mist_gb-none.png?rlkey=uidxoho9fsmn4up7qjkoxl77z&st=wczz4k0m&dl=0"
- then simply replacing "www.dropbox.com" with "www.dl.dropboxusercontent.com" gives a link that displays on Spacehey despite the proxy:
"https://www.dl.dropboxusercontent.com/scl/fi/ckgmn9rr2pzwcedllmjgn/crow-rabbit-mist_gb-none.png?rlkey=uidxoho9fsmn4up7qjkoxl77z&st=wczz4k0m&dl=0"
## in closing
I'll default to hosting my images on dropbox. I'm not sure why this works or what causes the problem in the first place. Maybe only some users have these issues depending on their browser and it's settings.
This may sound like a lot of extra work, but it's the current workaround I've found that helps me. I'm not aware of any other issues users may have, so feel free to share them and any solutions you've found. Hopefully, SpaceHey is aware and seeking to address these issues.
Comments
Displaying 4 of 4 comments ( View all | Add Comment )
kiko!
ahhh it didn't work with drop box lolol
Oh no :( just make sure the beginning of your share link is changed from "dropbox.com" to "dl.dropboxusercontent.com" Also, An recently fixed the proxy issues so my blog here is now obsolete :') lol. Images should be working from almost anywhere.
by krsyrh; ; Report
lolol if you take a look at my profile, the background is pure white. it's supposed to have this background repeated and animated.
this is the code.
body {
background-image: url(https:// www.dl.dropboxusercontent.com/scl/fi/16e6nyhs09e5slzrh73j5/starsagain.gif?rlkey=xlm9oh61w1z6w35ovfytm77f6&st=8t1bedwr&dl=0);
background-repeat: repeat;
background-attachment: fixed;
background-size: fixed;
and it works in my spacehey code launcher but not on the actual site :,)
by kiko!; ; Report
Sorry, I saw this hours later. I inspected your code; it looks like you used the body tag as a class ".body" instead of an element "body" | Try removing that period before body. I actually got to see it work on my end! I hope that fixes the issue for you!🌠
by krsyrh; ; Report
it didn't work :(
by kiko!; ; Report
Sorry I went to sleep right after that lol. There were a few errors: 1. Try also commenting out or deleting the "}" right before "Repeating animated background" | 2. Also looks like an issue with your cursor. Remove the ";" between "pointer; !important". This clears the errors, but the cursor urls aren't loading, not sure there should be two urls.
by krsyrh; ; Report
I also fixed the cursor! You're applying it to a ".cursor" class that isn't being used. Replace ".cursor" with "body" so that the cursor works on the entire page ✨
by krsyrh; ; Report
OMG WHAT IT WORKED!!! TYSMMM !!! AHHHHH
by kiko!; ; Report
Victoroni
OH. MY. GEEEEEEE!!!! UR A FREAKING LIFE SAVER THANKYOUTHANKYOU!!!! (*^▽^*)
No prob! Glad I could help!
by krsyrh; ; Report
whaz
this works peopls!!!
Thanks for the vote of confidence, Vash!
by krsyrh; ; Report
ttibiaa
omg thank you . i wiped my profile thinking my code was messing it up or something. LMAO
I'm glad I could help out!
by krsyrh; ; Report