img tag not working with relative path in src

Question

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.

Barbusse

What's the URL of the page this HTML is on? – Progesterone

localhost/asdf/asdf/asdf/asdf/index.php – Barbusse

Inspect the img element, right-click on the src and Open image in new tab to see the url that it's trying to get. You can also see it in the console and the network tab. – Contradiction

@miro yes I have done that. It is showing the image in either way when I run in netbeans. But when I run on browser, it doesn't work – Barbusse

Make a test.html with only the 2 img tags inside (the relative and abs) and see if that works... Also, did you check other browsers? – Contradiction

@miro The absolute is working fine. Relative is not working! – Barbusse

Answer 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

Unijugate

Answer 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.

Mathamathe

Unless of course the assets folder really is one directory above the current document. However, you're the first person to think of even asking in the first place, so for that, kudos. – Progesterone

Answer 3

src path for Express apps

If you are using Node.js with Express framework, the other answers will not solve your problem.

As said in Express' official documentation:

To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.

So you have to declare the folder of your static files. If, for instance, your image is located in:

[project root]/assets/images/image.jpg

then you should include in your main javascript file (e.g. index.js or app.js):

app.use(express.static('assets'))

then your img tag would look like:

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

Again, the documentation says:

Express looks up the files relative to the static directory, so the name of the static directory is not part of the URL.

Therefore, in this example you should omit "assets" in the src path, and also note the opening "/".

Ensoll

Answer 4

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

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.

Contradiction

Answer 5

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

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

Seftton

Answer 6

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).

Hallowed

Answer 7

import the content into a variable on top of the JSX with the "src/assets/images/..." path and use it in the button src (See below example code). start with src/... before assets/...

import imageContent from 'src/assets/images/image.jpg';

.
.
.

<img src={imageContent}/>

Prothesis

Answer 8

Ensure the <base> tag is correctly set up. In my case, it was:

<base href="/" />

The <base> tag sets the base URL for all relative URLs in the document. This means that if it is set to “/”, all your relative URLs will be resolved from the root of your domain. This can cause issues if your actual file paths are different.

Mandamandaean

Answer 9

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

Rok

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Lemur

Answer 10

In React:

1. import the image:

   import image from '../../assets/random-image.png'
   

2. use the imported variable as a value of a src attribute:

   <img src={image} />
   

Thagard

This is not a react question – Tremayne

Thanks this helped me get my logo on the Navbarbrand in React – Phelps

This helped me too in React. Thanks a lot! – Marinetti

thanks @Eduard, this helped solve my problem! – Ostia