How to add image in HTML using links?

Question

Issue is resolved thanks for the helps.

Answer 1

Actually, you need to use the URL of the image, not the URL of the page containing the image. Here, use this one:
https://upload.wikimedia.org/wikipedia/commons/c/c7/Mount-Everest.jpg

Answer 2

Right click on the image (hold the image if you're on mobile), copy URL. Done!

Answer 3

The link was wrong ..The right link to that image is ~
https://upload.wikimedia.org/wikipedia/commons/c/c7/Mount-Everest.jpg
Corrected Code ~
https://code.sololearn.com/WT30Z62qFeEg/?ref=app

Answer 4

<img src="url_of_img">
https://www.sololearn.com/learn/HTML/1030/?ref=app

Answer 5

I’m seeing a lot of correct answers utilizing an image link address, but I just wanted to toss in that you can utilize a saved image as well as long as its path is accessible.

For example, if i had a folder called “images” and an image called “apple.jpg” within that folder, i could insert the image by using:
<img src=“images/apple.jpg”>

Answer 6

🤔 Can you post the link here?

Answer 7

Thank you very much.

Answer 8

Blake
Very true. I am so used to using DropBox (from the phone) that I forgot you can have pics on pc. This opens up a whole other world for me! 😂🤣😂🤣

Answer 9

Make attention that though image link end with .jpg, its not true that link is an image (if you go to url https://en.m.wikipedia.org/wiki/File:Mount-Everest.jpg you can see that it link to a web page containing the image)... This because web servers can send to client any filetype though if image extension in in request url... The original url of your example image is https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Mount-Everest.jpg/800px-Mount-Everest.jpg . Try to set it like src of your img element and you will see

Answer 10

https://code.sololearn.com/WTg3hUY7oKz6/?ref=app

Answer 11

https://code.sololearn.com/Wr9kxr9PteJG/?ref=app

Answer 12

ThThinka
I do the sane thing! 😂🤣

Answer 13

<img src=“link.image_format” alt=“alternate text”>

src >> contains the path of the image.

alt >> Displays an alternate text incase the image is unavailable

You can style the image using CSS

Answer 14

use image url

Answer 15

very easily done! just find the image copy an paste url in your code and run it!

for example:

https://code.sololearn.com/Wfol3Y6yqKSS/?ref=app

Answer 16

I save the complete project folder to Dropbox, create a link for each image, and use that link as my site images’ urls.

Answer 17

You're like:
<img src="[URL of image]" alt="[alternative text in case URL doesn't work]"/>
Then run it.

Answer 18

It looks like the question has been already answered in many awesome ways. Here is my input on how to get the correct link of any image from any website.
You can obtain the correct link by right-clicking the picture you want and select copy image address from the drop down menu. This link will always take you to a page containing only the image.

Answer 19

your link must have extension on end the type of image .jpg or .png :))

Answer 20

The one issue with doing a link from the PC is if you plan on making it a long term website, you need to make sure the photo remains in the same position or remember to change the location if it is moved. Using Google Drive or a photo host of some kind is ideal for this reason.