Can we add images in SL?

Question

Soooo, I want to link an image but since the image is not in the same file or directory, it's gonna show the alternative instead. Is there a way to add images in Sololearn? If so, how?

Answer 1

There are basically 2 options for adding images to a "web" code in Sololearn's Code Playground. None are as ideal or elegant as you probably want but they work.

1. Use base 64 encoding for all of the images data and embed that encoding in either HTML or CSS. I use a tool at: https://www.base64-image.de/ to quickly upload and get encodings and then paste them into the 'background-image' value in CSS or to the SRC attribute of an img element in HTML.

I used this technique in a couple of my web codes including:
- https://code.sololearn.com/WiH4n0rrvD1B/ for a little thumbnail at the end of the animation
- https://code.sololearn.com/Wj4ErOsPXhhk/#css for the edited image of the pastor

2. You can reference your image from another host. If you found the image on another site, you could use an absolute URL to it. If it isn't already publicly accessible, you could upload images to many places to get a working URL including facebook, Google Drive, pinterest. Just make sure you can access it without being logged into any accounts.

Answer 2

Well explained, Josh 👍

Just adding on where to host your image:

[Tutorial] Upload content from your device to CodePlayground - The Dropbox way
https://code.sololearn.com/WW6t4B73kJVz/?ref=app