母版页和相对路径

一个经常让开发人员疑惑的问题是母版页是如何处理相对路径的。如果你使用的是静态文字，这一问题不会困扰你。不过，如果你加入了<img>标签或者指向其他资源的HTML标签，问题就可能发生。

当你把母版页和内容页放在不同的目录时，问题就发生了。把母版页和内容页分放到不同的目录，这是大型网站推荐使用的最佳实践。实际上，微软建议你在专门的文件夹里保存所有的母版页。不过，如果你不够小心，使用相对路径时会带来问题。

例如，假设你把母版页放在一个叫做MasterPages的子文件夹里，并在母版页里加入了如下的<img>标签：

假 设文件\MasterPages\banner.jpg存在，这看起来是行得通的。甚至在Visual Studio设计环境会出现图片。但是，如果你在另一个子文件夹里创建了一个内容页，路径就会被解释成相对于那个文件夹。如果文件在那里不存在，就会得到 一个破损的链接而看不到图片。更糟的是，如果有一幅具有相同文件名的另外一个图片，你会不经意地得到一幅错误的图片。

这样的问题之所以会 发生，是因为<img>标签是普通的HTML。所以，ASP.NET不会接触到它。遗憾的是，当ASP.NET创建 内容页的时候，这个标签就不合适了。相同的问题出现在向其他页面提供相对链接的<a>标签以及用来把母版页链接到样式表 的<link>元素。

要解决这一问题，你可以预先把URL写成相对于内容页面的地址。不过这会带来混淆，限制母版页使用的范围，并且产生在设计环境里不正确显示母版页的负面效应。

另一个快捷的解决方案是把图片标签变成服务器端控件，这样ASP.NET就会修复这个错误：

?

这个解决办法会起作用是因为ASP.NET根据这一信息创建一个HtmlImage服务器控件。这个对象在母版页的Page对象实例化后创建，此时，ASP.NET把所有路径解释为相对于母版页的位置。你可以使用同样的技术来修复<a>标签对其他页面的链接。

你还可以使用根路径语法，并用"~"字符作为URL的开头。例如，下面这个<img>标签毫无歧义地指向网站的MasterPages文件夹中的banner.jpg文件。

遗憾的是，这种语法只对服务器端控件有效。如果你要对普通的HTML产生同样的效果，你需要在链接里包含域名的完整的相对路径。这样的HTML代码难看且不可移植，所以不推荐使用。

我用的js加载图片的，应该去掉src前面的../，因为在生成的时候编译器会把图片的路径编译成../的形式，再加上之前已有的../，就会出现错误。