Recently I was creating a website on my computer (localhost). There I could work with paths that looked like this:
- /Styles/images/image.png
This works perfectly when running it on my local pc. There the website structure looks like this:
- http://localhost/
- http://localhost/Styles
- http://localhost/Styles/images
- http://localhost/Styles/images/images.png
- http://localhost/Styles/images
- http://localhost/Styles
But when I tried to copy it to my server it didnt work.
The problem was that the website I build was actually a subfolder of an existing application. So I had the problem that all my paths were wrong.
The structure of my server looks like this:
- http://localhost/
- http://localhost/App1
- http://localhost/App1/Styles
- http://localhost/App1/Styles/images
- http://localhost/App1/Styles/images/images.png
- http://localhost/App1/Styles/images
- http://localhost/App1/Styles
- http://localhost/App1
From now on I always work with the following code. This guarantees that the path is created at runtime and always right.
<img src="<%= Page.ResolveUrl("~") %>Styles/images/image.png" />
You can see in the code that the actual path of “~” is looked up at runtime. This keeps my application running in both my Visual Studio (where I don’t have the subfolder problem) and also on the server where it is a subfolder.
So from now on I automatically make use of this mechanism so that, when changing the application to a subfolder at a later time, it don’t give me the same problem.
Hopefully this can save you some time as well.