Javascript/ CSS/ Image Reference Paths

JavaScript/ CSS/ Image reference paths

Images (like background-url) in CSS are always referenced relative to the css file.

Example:

/img/a.gif
/css/c.css

To reference a.gif from the css file, you must always reference it like such ../img/a.gif, irrelevant to where a page is located or how it is rewritten

Using relative image path as parameter instead of using this

using "this" is easier and shorter than use relative path
but if you still want please try this:

HTML:

<div class="column">
    <img src="img/img_nature.jpg" alt="Nature" onclick="myFunction("img/img_nature.jpg","Nature");">
</div>

JS:

function myFunction(imgSrc, imgName) {
    // Get the expanded image
    var expandImg = document.getElementById("expandedImg");
    // Get the image text
    var imgText = document.getElementById("imgtext");
    // Use the same src in the expanded image as the image being clicked on from the grid

    expandImg.src = imgSrc;

    console.log(imgSrc);
    // Use the value of the alt attribute of the clickable image as text inside the expanded image
    imgText.innerHTML = imgName;
    // Show the container element (hidden with CSS)
    expandImg.parentElement.style.display = "block";
  }

Should image/css/javascript references from HTML use relative or absolute paths?

The answer is "it depends". But most of the time, the absolute path is probably best.

I use absolute paths where I am using templating, or if I am using Apache's mod_rewrite.

You might use a relative path if you had a page with an accompanying stylesheet that might be placed at different levels when it gets uploaded. i.e. You've written a page that will be used on many website, and some people might upload it to the root directory and some people might not - by using a relative path, as long as they upload the html file and css file together, it will work - whereas an absolute path wouldn't in this scenario.

Get relative path from $().css(background-image)

Try using String.prototype.split() with RegExp /\//, Array.prototype.join() , String.prototype.slice()

$("div").html(    $("div").css("backgroundImage").split(/\//)  .slice(-2).join("/").slice(0, -1)
)

div {  background-image: url(http://www.example.com/folder/bg.jpg)}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div></div>

javascript - How to use a image file relative to a url path?

In a CSS style sheet, the path is interpreted relative to the style sheet.

If you specify a path later, using JavaScript, it will be interpreted relative to the document.

You can still use relative paths, but, as said, they will have to be relative to the document. So it would have to be

url("module1/img.gif");

But you already know that.

I don't know a way of building paths relative to the style sheet outside the style sheet.

The only workaround that comes to my mind is to define a class inside the style sheet and, instead of specifying a background image using javaScript, changing the element's class.

In the style sheet:

.p2_img_gif {background: url('img.gif')}

and when the time comes for the paragraph to get the background image, do a

document.getElementById("p2").className = "p2_img_gif";

if you need to toggle classes, or specify multiple ones, consider using jQuery's addClass() and removeClass().

Relative paths of images in JavaScript

Mutable paths (test/staging/production domains) is always a problem in javascript, the best option is to include the root path of your application/website in the HTML. The obvious place to do this is in your template layer. For example:

<body data-root="${rootContext}">
<!-- or whatever syntax your template layer uses -->

And grab it with javascript for usage in your scripts.

var rootContext = document.body.getAttribute("data-root");

Note, you can only do this when the DOM is ready (or when document.body is available, differs cross browser) ;)

An alternative and in my view less pretty option is to simply render javascript.

<script>
    var rootContext = ${rootContext} // or whatever syntax your template layer uses.
</script>

At least with the 'data-root' technique, you can store the value wherever you like and avoid a global definition.

So in your code where you reference an image, you can do the following:

img.src = rootContext + "/media/js/close.gif";

Or create a nice helper method:

 // lets use a namespace to avoid globals.
 var myApp = {
     // still need to set this when DOM/body is ready
     rootContext: document.body.getAttribute("data-root"),
     getContext: function( src ) {
         return this.rootContext + src;
     }
 }

img.src = myApp.getContext( "/media/js/close.gif" );

In the helper method, you can also write some code to ensure proper uses of / and whatnot.

Accessing the img directory from scripts and css files

One robust way to access static resources in CSS is to always give the full path:

body {
    background-image: url("/path/to/image.png");
}

Notice the preceding / character. It tells the browser to look for the file at the root of the server. For example, if you currently are on http://example.com/pictures/album/5 then the above CSS will find the background at http://example.com/path/to/image.png.

Using the full path also encourages you to keep your resources well organized.

This is not to say that using relative paths is a bad thing, though. If you are working on a CSS project and put it in a sub-folder, say /static/myproject/project.css, then you can refer to images in that folder using relative paths.

If we say that your project is at /static/myproject, and the folder structure looks like this:

/static/myproject/project.css
/static/myproject/back-button.gif
/static/myproject/forward-button.gif

Then, in your CSS file, you can call the images relative to the CSS file:

.back {
    background-image: url("back-button.gif");
}
.forward {
    background-image: url("forward-button.gif");
}

The problem with doing it like this is that resources tend to be stored all over the place. That makes it more difficult to reuse resources.

How to give the background-image path in CSS?

Your css is here: Project/Web/Support/Styles/file.css

1 time ../ means Project/Web/Support and 2 times ../ i.e. ../../ means Project/Web

Try:

background-image: url('../../images/image.png');

How do i set the relative path and folder paths in HTML and CSS from VS 2012?

Are you certain that you set up different folders? Just because the solution shows different folders doesn't mean that actual folders have been created. Check your source folder to make sure.

If the folders exist, try adding / before images in background-image in your css.

Javascript/ CSS/ Image Reference Paths