I copied some code from VS Code to CodePen and my images (I have them on my computer, not online) wouldn’t display again. I’ve googled and found some stuff about moving the images to Google Photos and then creating a link to paste in apps like ByteNbit and Labnol. These apps are supposed to generate some HTML code that I’d embed in my code to make the images display, but they are taking too long to generate the code.
I don’t know if there are more convenient options anyone would like to suggest? I would immensely appreciate that.
But a friend I asked on WhatsApp suggested that I right-click on the image uploaded to Google Photos and click on the “copy image address” option. I’ve done that and it works. But I’m not sure it’s a very good solution, since the image address has no typical image extensions (.jpg or .png).
Anyhow, I’ll make do with this until I find a better solution.
Thank you for stopping by. I really appreciate your time and desire to help.
The “most correct” way is to actually use codepen’s paid plan (pro), which gives support for uploading files.
but paying to show an image for a demo project is rather annoying, and there are workarounds, such as the one you mentioned above.
Other options are providing a URL from another server/site as mentioned above (getting the raw asset URL from the HTML). This practice is more frowned upon, as your essentially leveraging some other site’s assets for your own, and can be thought of a form of stealing. But for a low traffic practice site it shouldn’t much impact, but still shouldn’t be used if you can use any other methods.
If your paying for image hosting in some way or form, or providing your own “quota” for a server in some way or form (like using google photos) it can be seen as a little better, but again it still isn’t optimal.
You could also not use codepen, and use another online IDE like replit, or a whole other method like github pages, but both of these require change and moving your project elsewhere.
Finally if your really desperate, you could transform your image to base64 using an online converter, and render that, but do keep in mind codepen has a limit on overall pen size of 1mb, so keep images as small.
At the end of the day get the image how you can, understand that most of the options aren’t optimal, and keep working on other skills
Good luck, keep learning, keep growing, keep building
Replit.com will give you 500mb of free storage. On my personal portfolio website I just upload the images to my img/ folder and they show up. 500mb isn’t a lot though, and if you have many images you’ll fill this up quickly.
I personally use backblaze b2 to upload images and other assets that I want to appear on my websites. It’s $5 per 500GB downloaded traffic so it’s quite affordable. I never have to worry about links breaking or becoming unresponsive, and it’s worth the $2.00 or so I give them every month.
If neither of those sound appealing you can find stuff by google-ing “free image hosting”. Hope this helps!
