Can't we show image in html using src with file path in our device ?

Question

I have used img tag with src from my file but, its not showing. Why ?
https://code.sololearn.com/Wl1G2HTBO557/?ref=app

Answer 1

Harsh Kishore, there is a bunch of code tutorials on how to upload an image to use it in Sololearn code. Some of them: https://code.sololearn.com/WW6t4B73kJVz/?ref=app , https://code.sololearn.com/WT3661NHpV3B/?ref=app , https://code.sololearn.com/Wy3lrXNwGsgJ/?ref=app . To see other tutorials, just open Code Bits/Playground tab, tap magnifier (search), type in "upload" and set the filter to Most Popular.

Answer 2

You can also use image binary data to post image
<img src="data:image/png;base64,xxxxxxxxxxxxx...">
Replace png with type of your image and xxxxxxxx with binary data you can get binary data of image by opening it up in notepad

Answer 3

upload your image in file image hoster: they are tons for free on internet ^^

Answer 4

Thanx Jan Markus , you and few others have became my best friends in this journey. If you have told this much then, tell how to store image in cloud as well. I have a question about your summary, if you don't have any problem my I ask?

Answer 5

Thanx YUGRAJ , but I am creating this code in sololearn only !

Answer 6

Folks!
1. Sololearn does NOT support LOCAL files. If it did, then how would you imagine other people seeing it? It even cannot exactly know from which device the code was saved!
2. Sololearn stores loaded HTML file for you to see it (at least, in iOS) to its special directory that user CANNOT have access to it without Jailbreak/Root/etc.
3. Have you even ever seen the source code when you click "Try It Yourself"? Do you think that you cannot use the file in web page when it is not on this directory or at least it is saved on the same device/host? Then there is big N O for you. If you still do not believe, read https://www.w3schools.com/html/html_images.asp completely.

Answer 7

Harsh Kishore there are tons of site from where you can upload your image and get the binary 64 encoded string...

however, that's only useful for tiny images, as that's quickly a lot of textual datas ^^

Answer 8

Kongnyuy Kevin, link to this code does not do anything with the question/discussion theme and so is just spamming. Do not do it again. Instead of that, give real answers when you can and there is no such answer.
If you just experimented with that, simply delete the answer when you get to know that it is working.

Answer 9

upload your image in file image hoster: they are many in internet for free

Answer 10

Why audio controls are not working ?
https://code.sololearn.com/Wl1G2HTBO557/?ref=app

Answer 11

Harsh Kishore,
1. Seems that you have set the image holding time not permanent and it has been expired, so it is not showing; try re-uploading the image while setting permanent upload (no expire, infinite time, etc.).
2. The visible part of an audio is exactly what `controls` does, so it is working; try removing it and see the difference.
3. Google Drive does not allow easy access to the file directly, you just pasted the link to Google's "file view"; tapping Download and pasting the link will not work either; it is just a link for one-time access; try searching for other audio/file hosting/uploading sites that include direct/"raw" access to file.

Answer 12

Good day every one, pls how can i make my image slid?

Answer 13

Yes you can by just putting the img in the same directory with the HTMK file or in a file and use the right path to the img in src for ex :
<img src="the path to your img" >

Answer 14

When calling an img for your files, you have to put the file directory ex: dir/code/img/filename.
This is not proper syntax but it proves the point.

Answer 15

When you want to use the img tag to bring in an image make sure the HTML file and the image you want to bring in are saved in the same file

For example

<img src="sponge.jpg">

so the sponge.jpg( which you must edit with the name of the picture) is the image you want to bring into your code.