CODEWITHSUNDEEP
javascripthtmlasp.netpath
AzNjoE
AzNjoE

Reputation: 733

Specifying a relative path on a multiple site web server and localhost

I have a ASP.NET website that gets published to a web server that has multiple sites. For example:

www.example.com/SiteA or www.example.com/SiteB

Plus I also test the site locally before publishing, for example at localhost:12345

When I specify a path for an image, for example: /Images/exampleImage.gif, this works when running the site locally, since the Images folder is in the root directory. localhost:12345/Images/exampleImage.gif is the correct path in this case.

But when published to the web server, for example to www.example.com/SiteA, the same path tries to go to www.example.com/Images/exampleImage.gif and the image doesn't appear correctly.

Also, this is only for HTML controls, as with a ASP control, I know I can just use the tilde (~/Images/exampleImage.gif) and it'll know to look at the site's root directory, which is www.example.com/SiteA/Images/exampleImage.gif.

For my case, It'd be strongly preferred to stay with an HTML control.

Edit: The reason for this is because I have JavaScript that changes the image of a html img control based on if a div is hidden:

function Toggle(commId, imageId) {
    var div = document.getElementById(commId);
    var img = document.getElementById(imageId);
    if (div.style.display == 'none') {
        div.style.display = 'inline';
        img.src = "/Images/minus.gif";
    } else {
        div.style.display = 'none';
        img.src = "/Images/plus.gif";
    }
}

How could I get the path to the images folder, relative to the root of the site when there's folders for each site on a server, as well as still working on localhost?

Upvotes: 0

Views: 96

Answers (2)

AzNjoE
AzNjoE

Reputation: 733

I didn't know you could put embedded C# code in JavaScript, but figured it out by just doing :

function Toggle(commId, imageId) {
    var div = document.getElementById(commId);
    var img = document.getElementById(imageId);
    if (div.style.display == 'none') {
        div.style.display = 'inline';
        img.src = "<%= ResolveUrl("~/Images/minus.gif") %>";
    } else {
        div.style.display = 'none';
        img.src = "<%= ResolveUrl("~/Images/plus.gif") %>";
    }
}

Since the ResolveUrl method can take the tilde (~) for the path value and knows the websites root directory over the server's.

You can also use the embedded code with the same ResolveUrl method directly in the src attribute of the img html control (and other attributes/controls), in case anyone runs into this same issue but with just the HTML controls.

Upvotes: 0

matt-dot-net
matt-dot-net

Reputation: 4244

You'll have to use code to do the ~/ or publish a new virtual directory called "/Images" on your server that contains the images.

Upvotes: 0

Related Questions