Adding images in HTML

0
votes

I have been trying to add an image for the past 2 days, I watched some feeds here, I have watched some videos on Youtube aswell and I have searched it on google, but it does not work. I have saved different images in the desktop and added in the visual studio code template where the index file is, but it does not work at all, it displays the alt attribute text, but it does not display the photo. Can somebody please tell me what is the issue? Thank you.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src = "Trulli.jpg" width = 100 height = 100>
 </body>
</html>
3
html
Can you share a ss of your file explorer? - Dev-Siri
Is your image in the same folder as your HTML file? - j08691

3 Answers

0
votes

You need to put the full path in the "src" attribute.

Something like that: "C://User/Desktop/Trulli.jpg"

Demo -> https://jsfiddle.net/cn4bdwht/

If your image is in the same location as your file html, change it to src="./Trulli.jpg"

Windows: You can right click on the image, go to properties and search for "Location", the value is what you are looking for.

0
votes

You can always upload your image using a provider like https://imgbb.com/ and then linking it to your project.

<img src="https://www.example.url/sadasd width = "1920" height = "1080" />

Or you can Maybe add the image into your parent directory and add the image src.

<img src="./Trulli.jpg" width="100" height="100"/>

Using frameworks such as React, Vue and others allows ease of use while importing images into the /Public folder created.

0
votes

The image you are trying to add should be in the same folder or place your code file is or you have to give full path info while calling img src="path"

Screenshot of the File and result