Regarding inserting images in html files

[Debaashish84]

I have been trying to insert images in my html files, but they are ending up being broken images. I really can't figure out where exactly l am going wrong. Is there anybody to make some suggestions ?

 

[Johna]

Hi there, have you double checked to make sure the file paths are correct?

 

[Debaashish84]

Probably that's where l am going wrong. How to double check and ensure that the file paths are ok ?

 

[Johna]

Check the path given in the HTML image, and then check the site files to see it this is referenced correctly.
path-to/image.png will mean the image image.png is in a folder called path-to, and that folder is in the same folder as the html file.
If it helps, can you post the html code for the image?

 

[Debaashish84]

It's a jpeg image l'm trying to load, and it's in my desktop.

 

[Johna]

Where is your html file located?
You can use relative paths, so ./image-name.jpeg if the html file is also on your desktop, or you can also use absolute file paths, which start with / meaning the root directory, so it'll be something like /Users/[user name]/Desktop/image-name.jpeg assuming you're on windows.

Read more about file paths here: HTML File Paths - W3Schools

 

[Zakwan@MTH]

Hey There!
The location of your HTML file determines how you reference other files. You can use relative paths, such as ./image-name.jpeg, if the HTML file is in the same directory (e.g., on your desktop). Alternatively, you can use absolute paths, which start from the root directory. For example, on Windows, it might look like /Users/[your username]/Desktop/image-name.jpeg.

 

[tomliv]

Hello @Debaashish84 ,

Given this file (directory) structure:

MyProject
├─ css
├── styles.css
├─ images
├── myimage.jpg
├── myimage1.jpg
├── myimage2.jpg
├─ index.html

The path for one of the images in index.html would be:

<img src="images/myimage.jpg" alt="" width="" height="">

 

[Zakwan@MTH]

I have been trying to insert images in my html files, but they are ending up being broken images. I really can't figure out where exactly l am going wrong. Is there anybody to make some suggestions ?

if you refer to the image direclty as

<img src="imagname.jpg">

then you need to make sure that the image is in the same folder as the file in which you are including the image otherwise you gotta give refernce to the image with respect to the file for example if the image is in a folder called "images" and the folder and the file are in the same folder then do

<img src="./images/imagname.jpg">

where the . refers to the current folder
while if you want to refer to the previous folder you use ..