Question

我创建了自定义dnn模块。当然，模块是一个单独的组件。在模块项目中，我有文件夹Images。我有一个可怕的问题来引用相对路径的图像。我试过了

background: url(~/Images/image01.png)
background: url(~/MyCustomModule/Images/image01.png)
background: url(~/DesktopModules/MyCustomModule/Images/image01.png)
etc.

没有任何作用。让它发挥作用的唯一方法就是我写下这样的东西：

background: url(../../DesktopModules/MyCustomModule/Images/image01.png)

但是这可以在我的生产服务器上运行，但不能在我的本地dnn安装中运行。有没有正确的方法来引用此文件夹中的图像？

Answer 1

在CSS文件中，您有几个选项。

使用有根路径

background: url(/DesktopModules/MyModule/Images/MyImage.png);

这将有效，但仅限于“子门户”或非虚拟目录设置。

如果你能做到这一点，最好的选择是让URL相对于css文件本身......

因此，如果您的css位于/ DesktopModules / MyModule中，那么您将使用

background: url(Images/MyImage.png);

这应该适用于两种情况。

Answer 2

原因：缺少服务器名称。在本地计算机上，地址看起来像http://localhost/<servername> - 例如我的地址是http://localhost/dnn6.

它在本地计算机上不起作用的原因是因为浏览器正在http://localhost/Images/image01.png or http://localhost/DesktopModules/MyCustomModule/Images/image01.png.

查找图像

我更喜欢在后面的代码上插入我的css和其他脚本。这样就包含了服务器名称，它可以在生产和开发服务器上运行。

LiteralControl litScripts = new LiteralControl();
litScripts.Text +="<link href=\"" + this.TemplateSourceDirectory + 
"/CSS/Form.css\" rel=\"stylesheet\" type=\"text/css\" />";
Page.Header.Controls.Add(litScripts);

在我的生产服务器上，网址看起来像

<link href="/DesktopModules/MyCustomModule/CSS/Form.css"
rel="stylesheet" type="text/css" />

在开发服务器上，它将作为

插入

<link href="/DNN6/DesktopModules/MyCustomModule/CSS/Form.css" rel="stylesheet" type="text/css" />

现在编辑Form.css看起来像这样，

background: url(../Images/image01.png)

Answer 3

您在顶部示例中使用的链接通常不会在CSS文件中使用。 ~是由ASP.NET特殊处理的，表示应用程序的根。你的CSS文件将不知道它是什么，并将在字面上传递它，这可能会破坏链接。

您可以使用以斜杠开头的根路径，而不是使用相对路径吗？什么是正确的文件在哪里：

background: url(/DesktopModules/MyCustomModule/Images/image01.png)
background: url(/MyApplication/DesktopModules/MyCustomModule/Images/image01.png)
background: url(/MyApp/Subdir/DesktopModules/MyCustomModule/Images/image01.png)

请确保网址以前导/开头，以表示“网站的根目录”

Answer 4

css文件对〜字符不知道任何事情。路径应该相对于那些css文件的位置

DotNetNuke中相对路径的问题

4 个答案: