Javascript – Get path to image

htmljavascriptrelative-path

I wrote a javascript method to display an image dynamically depending on whether or not a plugin is installed or not. Depending on the page, the url might be deep into sub paths and i wanted to see if i can get a path back to the image without all the marky-mark.

Example

myImage src location = {root}/Content/Images/myImage.png

Now call the js to display the image on the following pages. I show the path of the example page and the image element with the src path. Notice how its different depending on how deep we are. If i use an absolute path, then i would have to change it for my test environment and production. I thought I could use ~ but i guess not. Ideas ?

http://mysite.com/sub1/sub2/ — <img src="../../Content/Images/myImage.png" />

http://localhost:2500/sub1/ — <img src="../Content/Images/myImage.png" />

Best Answer

The tilde is only relevant for .NET server side code.

An easy way to accomplish what you're looking for is to write the root path out to a javascript variable or function.

For example on the server side on your page:

public string RootPath
{
  get
  {
     return ResolveUrl("~/");
  }
}

And then use the following javascript:

<script type="text/javascript">
<!--
function getRoot()
{
   return '<%= RootPath %>';
}
// -->
</script>

You can then use the javascript getRoot function to get to the root of the website and use it for your urls.

Short & Snazzy:

+ new Date()

A unary operator like plus triggers the valueOf method in the Date object and it returns the timestamp (without any alteration).

Details:

On almost all current browsers you can use Date.now() to get the UTC timestamp in milliseconds; a notable exception to this is IE8 and earlier (see compatibility table).

You can easily make a shim for this, though:

if (!Date.now) {
    Date.now = function() { return new Date().getTime(); }
}

To get the timestamp in seconds, you can use:

Math.floor(Date.now() / 1000)

Or alternatively you could use:

Date.now() / 1000 | 0

Which should be slightly faster, but also less readable.
(also see this answer or this with further explaination to bitwise operators).

I would recommend using Date.now() (with compatibility shim). It's slightly better because it's shorter & doesn't create a new Date object. However, if you don't want a shim & maximum compatibility, you could use the "old" method to get the timestamp in milliseconds:

new Date().getTime()

Which you can then convert to seconds like this:

Math.round(new Date().getTime()/1000)

And you can also use the valueOf method which we showed above:

new Date().valueOf()

Timestamp in Milliseconds

var timeStampInMs = window.performance && window.performance.now && window.performance.timing && window.performance.timing.navigationStart ? window.performance.now() + window.performance.timing.navigationStart : Date.now();

console.log(timeStampInMs, Date.now());

Best Answer

Related Solutions

Python – How to get an absolute file path in Python

Javascript – How to get a timestamp in JavaScript

Short & Snazzy:

Related Topic