'img tag not working with relative path in src

This is not working:

<img src="../assets/images/image.jpg" alt="Alternative Text">

But this is working:

<img src="http://localhost/abc/def/geh/assets/images/image.jpg" alt="Alternative Text">

In my scenario, I just cannot work with absolute path. I have to use relative path.

htmlcssimage


Solution 1:[1]

<img src="assets/images/image.jpg" alt="Alternative Text">

should be working.You shouldn't have put '../' at the begining of the image path.

For better understanding about relative paths vs. absolute paths, refer this link

Solution 2:[2]

"../assets/images/image.jpg" -This means

  1. '../' go up one directory from where I am now
  2. find the 'assets/' folder
  3. find the 'images' folder
  4. find the 'image.jpg' file.

That relative link will only work if your page is in a subfolder in

"http://localhost/abc/def/geh/"

If the location of your page really is

"localhost/asdf/asdf/asdf/asdf/index.php"

(which seems ridiculous) to get to the assets folder relatively you would have to go all the way to the root.

'../../../../abc/deh/geh/assets/images/image.jpg;

Alternatively you could use a base tag in your head tag to make the URL in the actual src attribute more friendly.

Solution 3:[3]

I suspect you didn't actually do what I told you to so here is a screenshot:

enter image description here

If the image opens in a new tab then you have some kind of bug or extension that's messing it up in the html. If you messed up the relative path, you'll most likely get 404 but you'll be able to see the path as absolute. It may look like http://localhost/asdf/asdf/asdf/asdf/assets/assets/image.jpg Either way, send a screenshot of the above operation.

Solution 4:[4]

I will make your life very very simple.
Use it in following manner

<img src="../image_store/Part2.jpg" alt="Dress Picture"/>

Solution 5:[5]

One thing you can ckeck: is your current page url ends with "/". So when I have url like http://127.0.0.1:7777/www/ then all my relative urls working but then I use it as http://127.0.0.1:7777/www (no "/" at the end) browsers thinks "www" is file and not a folder. May be this can be configured somehow serverside (in my case I run custom http server software written by me).

Solution 6:[6]

Do not right click and copy relative path. Simply follow the syntax below <img src="ImageFolderName\filename"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tharushi Geethma
Solution 2 user2782001
Solution 3 Miro
Solution 4 Vinod Kumar
Solution 5 Fedir Tsapana
Solution 6

Related Questions