ASP.NET Linking to resources (img, css, js) from different paths

Question

Iam new to ASP.NET and poking around my first ASP Web Application projects in .NET 4.0 I have problem, which I can't solve, and google searches does not bring any joy.

So I would kindly ask for help and/or explanation of following problem:

Assume that I have set up following project structure:

\default.aspx
\[gfx] (dir)
   \[images]
     \picture.jpg
   \[css]
     \stylesheet.css
   \[js]
     \jquery.js
\[backend]
   \main.aspx

So, in default.aspx I can link to image or css like that:

     < img src="/gfx/images/picture.jpg">
     < link rel="stylesheet" type="text/css" href="/gfx/css/stylesheet.css"/>

It works, but Iam afraid that this linking technique is not the "correct" one. Yes - it works and it links, but as I was PHP developer I was always linking to the full path of resource, for ex: < img src="gfx/images/picture.jpg" /> Which was translated to < img src="http://www.mysite.com/gfx/images/picture.jpg" />

Is there a way to achieve similar result in ASP.NET without loosing the design preview in visual studio ? It my linking technique is common one or is there another way ?

Best regards

score 1 · Accepted Answer · answered Feb 28 '11 at 14:15

Mostly ~ operator is used, the asp.net automatically maps it to the root of your application.

<head runat="server">
<img src="~/gfx/images/picture.jpg">
<link rel="stylesheet" type="text/css" href="~/gfx/css/stylesheet.css"/>
</head>

you can also use application root path in variable and can use. For Example

<head>
<img src="<%=SomeClass.SITEURL%>/gfx/images/picture.jpg">
<link rel="stylesheet" type="text/css" href="~/gfx/css/stylesheet.css"/>
</head>

The use of later technique has a few advantages, as it is rendered as absolute path (little bit fast) and configurable in a sense if you want to place static content from different server.

score 0 · Answer 2 · answered Feb 28 '11 at 14:12

what you are doing is the common way of doing it. you CAN use full paths, but most of the time you want to use relative paths. this way, if your URL changes, you site doesn't break.

for example, if you site is "www.mysite.net" and your images point to "www.mysite.net/images/someimage.png" and later you change your site to "www.someothersite.com" your site will break. however, if you use "/images/someimage.png" it won't break.

score 0 · Answer 3 · edited May 14 '15 at 08:19

If you are displaying image from CSS then try to use it from there. For example. Create a style dir, inside style create an image and put all images that are going to be used in CSS.

like

.div
{
  background-image:url('images/abc.png');
  color:#24543F;
}

For general images, create a folder images in the root and put all images inside that are to be rendered without CSS. Where you need to use those image just drag and drop the image, VS will do the rest. If you need to set it programmatically from Codebehing add runat="server" in the tag. That's all.

score 0 · Answer 4 · answered Feb 28 '11 at 14:15

0

You are already doing it the right way! and when you Publishing your site to your server the link will be the full link like in php

answered Feb 28 '11 at 14:15

Kimtho6

6,154
9
40
56

score 0 · Answer 5 · edited May 23 '17 at 12:21

0

You could do a design time style sheet. This is very handy for when you are making user controls. The process has been discribed here; How to make user controls know about css classes in ASP.NET

edited May 23 '17 at 12:21

Community

1
1

answered Feb 28 '11 at 14:17

Mike Mengell

2,310
2
21
35

ASP.NET Linking to resources (img, css, js) from different paths

5 Answers5