CODEWITHSUNDEEP
htmlfilenavigationstructure
ValleyDigital
ValleyDigital

Reputation: 1470

Linking images that are in separate folders

I've been working in some friends code, and most of his images are called out as:

<img src="/uploads..."> //the '/' before the folder in the src isn't allowing me to link to the images.

I know this is probably a very easy question to most of you, but I can't seem to get the images to link correctly. I have a file structure as follows:

project folder>two folders (uploads) & (code)

Now, if I have my html in the 'code' folder, and i'm trying to link to all of the images in 'uploads' folder, how should I restructure my files so they will link? I've tried putting the html in the root under 'project folder' and it still doesn't link to the images in uploads.

The point is that I don't want to take out the '/' in every src inside the html, and I was hoping I could structure the files so they will just all link correctly.

Upvotes: 0

Views: 4126

Answers (3)

Slobodan Antonijević
Slobodan Antonijević

Reputation: 2643

You can do it via absolute or relative path in src attribute.

Absolute:

http://example.com/uploads/example.png

Relative:

./../uploads/example.png

Relative example is if we consider "code" to be your current dir.

./ - is a current dir
./../ - is one dir back from current dir
./../uploads/ - is one dir back from current dir, and switch to uploads dir

Upvotes: 1

user2639866
user2639866

Reputation:

try :

<img src="./uploads/yourimage.ext">

or :

<img src="uploads/yourimage.ext">

Upvotes: 1

David
David

Reputation: 219106

If every image link looks like this:

/uploads/someFile.ext

Then the files being linked to are going to need to be in a folder called uploads in the root of the web server. Basically the above gets translated to this:

http://server/uploads/someFile.ext

No matter what the URL of the page is.

In general this sort of thing is frowned upon because it requires that the website run in the root of the server/domain/etc. If you want the website to run in a sub-folder then you need to change the above absolute path to a relative path:

./uploads/someFile.ext

That tells the browser to append the link to the current URL "folder" (I use the term loosely, but you get the idea) of the current document. So if the URL of the page is something like:

http://server/someFolder/anotherFolder/index.html

Then the image links will be created relative to that:

http://server/someFolder/anotherFolder/uploads/someFile.ext

In the long run, your best bet is to update all of the links accordingly. Absolute paths (what you currently have) should only be used if there's a truly compelling reason to use them. Where possible, use relative paths.

As a quick fix, as long as the uploads folder is in the root of the URL domain, it should work.

Upvotes: 1

Related Questions