visual-studio Visual Studio 中样式表的相对路径在预览中不起作用

Relative path to a stylesheet in Visual studio not working in preview

提问by Tim Saunders

I'm assuming this is an easy question, but I'll be darned if I can find the answer.

我假设这是一个简单的问题，但如果我能找到答案，我会很生气。

I have a website in Visual Studio 2008. The paths to the stylesheets (and images) are in the following format /css/stylesheetname.css

我在 Visual Studio 2008 中有一个网站。样式表（和图像）的路径采用以下格式 /css/stylesheetname.css

At the root of the web project in Visual studio the folder exists as does the stylesheet. These paths work fine when running it in IIS.

在 Visual Studio 中 Web 项目的根目录中，该文件夹与样式表一样存在。这些路径在 IIS 中运行时工作正常。

If I use the inbuilt webserver in Visual Studio the paths fail because it puts the projectname in the path i.e. http://localhost:2020/projectname/default.aspx

如果我在 Visual Studio 中使用内置网络服务器，路径将失败，因为它将项目名称放在路径中，即http://localhost:2020/projectname/default.aspx

In this case the / takes the path right back to http://localhost:2020

在这种情况下， / 将路径返回到http://localhost:2020

This is further compounded by the fact that if you click "design" the styles that import background images all fail although the stylesheet is imported correctly (becuase all other aspects of the stylesheet work i.e. .class{font-family:arial;}works but .class{background: url(/images/image.jpg)}does not).

如果您单击“设计”，则导入背景图像的样式都会失败，尽管样式表已正确导入（因为样式表的所有其他方面都有效，即.class{font-family:arial;}有效但.class{background: url(/images/image.jpg)}无效），这一事实进一步加剧了这种情况。

I guess it's all to do with how Visual studio calculates its root path for the website, however I can't find a setting to change this.

我想这与 Visual Studio 如何计算网站的根路径有关，但是我找不到更改此设置的设置。

Any ideas?? Update:as per Egil Hansen's answer I converted the paths in the CSS file to relative paths. However the background images still do not display in Design mode. I'll take a look at using Themes to get round this in due course.

有任何想法吗？？ 更新：根据 Egil Hansen 的回答，我将 CSS 文件中的路径转换为相对路径。然而，背景图像在设计模式下仍然不显示。我会在适当的时候看看使用主题来解决这个问题。

回答by Egil Hansen

I think the correct solution is to use relative urls in the style sheet instead of absolute urls as you use now.

我认为正确的解决方案是在样式表中使用相对 url，而不是您现在使用的绝对 url。

Do note that relative urls in style sheets are relative to the location of the style sheet, not the current page being view by the browser.

请注意，样式表中的相对 url 与样式表的位置有关，而不是浏览器正在查看的当前页面。

If you use ASP.NET Themes, you can put all your website graphics in a /App_Themes/YourTheme/Images/folder, and put your style sheet in the /App_Themes/YourTheme/folder.

如果您使用 ASP.NET 主题，您可以将您所有的网站图形放在一个/App_Themes/YourTheme/Images/文件夹中，并将您的样式表放在该/App_Themes/YourTheme/文件夹中。

In your style sheet, you can then simply reference an image with url(Images/img.gif), and it will work both online and in development.

在您的样式表中，您可以简单地使用 引用图像url(Images/img.gif)，它既可以在线使用，也可以在开发中使用。

The you just need to assign your ASP.NET Theme to the page(s) you want, either through web.config's Pages section (<pages styleSheetTheme="Default">) that will assign a theme to all pages on the website or through the <%@ Page ... directive on each page.

您只需要通过 web.config 的页面部分 ( <pages styleSheetTheme="Default">)将您的 ASP.NET 主题分配给您想要的页面，该部分将为网站上的所有页面分配一个主题，或者通过 <%@ Page ...每个页面上的指令。

In general, you can do some really neat things with ASP.NET Themes and Skins, just take a look at the ASP.NET Themes and Skins Overviewover at msdn.microsoft.com.

一般来说，您可以使用 ASP.NET 主题和皮肤做一些非常巧妙的事情，只需查看msdn.microsoft.com上的ASP.NET 主题和皮肤概述。

There are a few issues to be aware of with Themes in ASP.NET, take a look at my post How to take control of style sheets in ASP.NET Themes with the StylePlaceHolder and Style control, which explains and solves the issues I have come across so far.

ASP.NET 中的主题有一些需要注意的问题，请查看我的帖子如何使用 StylePlaceHolder 和样式控件控制 ASP.NET 主题中的样式表，它解释并解决了我遇到的问题到目前为止。

回答by thp3l0

I have been running projects using the custom Image folder for all my graphics for ASP.Net applications. While there have been advancement in this regard with the App_Theme and App_Code folder(s) available in the progressive VS IDE; I still kept my folder and it has not disapponited when deploying it on the server.

我一直在为 ASP.Net 应用程序的所有图形使用自定义 Image 文件夹运行项目。虽然在渐进式 VS IDE 中可用的 App_Theme 和 App_Code 文件夹在这方面取得了进步；我仍然保留了我的文件夹，并且在将它部署到服务器上时并没有使它失望。

So with that said - the proverbial folder will be sitting with all the bin, App_Code and _Themes and the reference to it is made through this way

话虽如此 - 众所周知的文件夹将与所有 bin、App_Code 和 _Themes 放在一起，并且通过这种方式对其进行引用

background: url(../image/..);

背景： url(../image/..);

of course the code above sitting in the CSS file. It works for me all the time

当然上面的代码位于 CSS 文件中。它一直对我有用

回答by chilleo

not sure if this works for VS 2008 or not, but im using visual web developer 2010 and it worked for me:

不确定这是否适用于 VS 2008，但我使用的是 Visual Web Developer 2010，它对我有用：

1) click on the project in the solution explorer

1）在解决方案资源管理器中点击项目

2) it shows a "Virtual Path" property which is defaulted to "/projectname"

2）它显示了一个“虚拟路径”属性，默认为“/projectname”

3) change it to "/" instead and it seems to do what is desired

3）将其改为“/”，它似乎做了想要的

let me know if this works for you!

让我知道这是否适合您！

回答by chilleo

I had the same issue and it drove me crazy. Solution is to add an Apps_Theme folder and copy the images into there. When you publish the site the folder structure is preserved and the imnges display.

我遇到了同样的问题，这让我发疯了。解决方案是添加一个 Apps_Theme 文件夹并将图像复制到那里。发布站点时，会保留文件夹结构并显示图像。

回答by chilleo

I had set path css url image by code { background:url(/images/xxx.jpg) no-repeat; } and running file at IIS, so must to point default website to your project

我已经通过代码设置了路径 css url 图像 { background:url(/images/xxx.jpg) no-repeat; 并在 IIS 上运行文件，因此必须将默认网站指向您的项目

how to running testing preview type: http://localhost/default.aspx

如何运行测试预览类型： http://localhost/default.aspx

this is correct path same running on server include file js or css can use "/" root path

这是在服务器上运行的正确路径包含文件 js 或 css 可以使用“/”根路径

cheers Noboyband

欢呼Noboyband

回答by Nailer

it has been ages since I did anything in css, but maybe url(./images/image.jpg) will work?

自从我在 css 中做任何事情已经有很长时间了，但也许 url(./images/image.jpg) 会起作用？

Edit: Or rather ~/format /css/stylesheetname.css or ./format /css/stylesheetname.css as the url to the stylesheet.

编辑：或者更确切地说 ~/format /css/stylesheetname.css 或 ./format /css/stylesheetname.css 作为样式表的 url。