3

My website has the following structure:

root            --> such as localhost or example.com or file:///... etc.
|--css
|--image
: |--folder     --> root/image/folder/
|--js
: |--script.js  --> root/js/script.js
|--page
: |--index.html --> root/page/index.html
|--index.html   --> root/index.html

I use jQuery to write images for root/index.html and save to root/js/script.js

var db = {
    "images" : [
        {"image-url": "image/folder/myImage.png"},
        {"image-url": "image/folder/myImage.png"},
        {"image-url": "image/folder/myImage.png"}
    ]
}

$.each(db.images, function (key, data) {
    var image = data['image-url'];
    $('body').append('<image src="' + image + '" />');
}

It works correctly. My images are displaying. I'll try to create index.html in root/page and use ../js/script.js on this page. But it's seem not display any image. On browser show blank box of image. I'll try to look at F12 and found image-url return this value.

GET root/page/image/folder/myImage.png net::ERR_FILE_NOT_FOUND

But I want to reference my image at root/image/folder/myImage.png. I don't know how to write the script for reference image url for to write image and show on any page that use same script. Can't someone to fix this problem. Thank in advance and sorry for my skill.

Yeldar Kurmangaliyev
  • 33,467
  • 12
  • 59
  • 101
phongphan117
  • 87
  • 1
  • 13

1 Answers1

3
  1. If you have several static images, then it would be better to use CSS:

If you have a background-image definition in your CSS file, then it will work for any relative path.

CSS (root/css/site.css): 

.some-image {
     background-image: url('../image/your-image.png`);
}

Now, if you include this in root/index.htm and root/page/index.htm, it will work for both of them.

  1. If your images are dynamic and are generated by PHP or whatever else, you can use the following URLs: 

    var db = {
    "images" : [
        {"image-url": "/image/folder/myImage.png"},
        {"image-url": "/image/folder/myImage.png"},
        {"image-url": "/image/folder/myImage.png"}
    ]
};

There is a leading slash in URL. I.e., the result is the following:

<img src="/image/folder/myImage.png"/>

It it an absolute-path reference. The URL will be calculated from the root of domain. For example, for http://localhost it will be http://localhost/image/folder/myImage.png, and it will be the same for any page in your host.

Notice that,
- If your site is located in a subfolder, an absolute URL will still point to the root folder
- For file protocol / will point to the root of your drive

You can use BASE tag to specify your base URL.

Read more about it at this Stackoverflow topic and this Webmasters Stackexchange topic.

Community
  • 1
  • 1
Yeldar Kurmangaliyev
  • 33,467
  • 12
  • 59
  • 101
  • I'll try to use 2nd way and come back to tell my result. – phongphan117 Sep 25 '15 at 04:33
  • I try on local strorage such as `G:/something` and browser return `/` as drive letter only such as `file://G:/image/folder/myImage.png` not `file://G:/something/image/folder/myImage.png` and I found this error on my console `GET file://G:/image/folder/myImage.png net::ERR_FILE_NOT_FOUND` – phongphan117 Sep 25 '15 at 05:47
  • @phongphan117 It won't work for local file storage, yes. There is no way you can define a relative path to the "root" folder of your web-site on a local storage withotu CSS. Use local server instead. – Yeldar Kurmangaliyev Sep 25 '15 at 05:50