使用 jquery 脚本页面从当前文件夹设置 css 图像答案

【问题标题】：set css image from current folder using jquery script page使用 jquery 脚本页面从当前文件夹设置 css 图像
【发布时间】：2015-06-20 08:29:58
【问题描述】：

我有一个外部 Javascript 页面，位于父级的 ../Scripts/CBox/ 文件夹下。有一个图像位于同一文件夹中。我想从那里使用 Jquery 为控件设置background-image。当我使用此代码时，它将background-image 路径设置为localhost:7905/ddl_arrow.png，其中localhost:7905 是我的asp.net 开发服务器。

 function createAutoCBox(boxCtrl) {

    $(boxCtrl).css('background-image', 'url("ddl_arrow.png")'); 
    $(boxCtrl).css('background-repeat', 'no-repeat');
    $(boxCtrl).css('background-position-x', '99%');
    $(boxCtrl).css('background-position-y', '-2px'); 
    $(boxCtrl).mousemove(jqAutoCompleteMouseMove);
    $(boxCtrl).keyup(jqAutoCompleteKeyUp);
    $(boxCtrl).mousedown(jqAutoCompleteMouseDown);
}

【问题讨论】：

标签： javascript jquery css asp.net path

【解决方案1】：

没有办法“在服务器上获取当前脚本的路径”，因为 JS 是在客户端完成的。所以没有简单的方法来做你想做的事。

只有几种方法可以解决这个问题，所有这些方法都基于相同的原则：正确组织您的文件 - 每个资源都应该是一个 URL。想一想：如果你不能可靠地知道ddl_arrow.png 的存储位置，浏览器也不能。

我认为最好的解决方案是将所有图像放在服务器根目录的 [img] 文件夹中。这意味着您可以通过这种方式引用图像：url(/img/ddl_arrow.png)。无论哪个 JS、哪个 CSS 或 HTML 文件需要这些图像，请确保它们始终使用前面的斜杠引用图像。当然，这不仅适用于图像，还适用于所有其他资产/资源——字体、视频、音频，甚至 HTML、CSS、JS 文件本身。基本上，您的服务器服务的每个文件都应该以这种方式引用。

还有其他一些涉及令人讨厌的、混乱的东西的 hack，比如使用服务器端脚本打印 JS 文件的位置，该文件被直接提取到 JS 文件中，但我建议远离这些方法。

【讨论】：

【解决方案2】：

你最好这样做：

CSS

.my-background {
    background-image: url("ddl_arrow.png");
    background-repeat: no-repeat;
    background-position-x: 99%;
    background-position-y: -2px;
}

JQuery

$(boxCtrl).addClass('my-background');

CSS 将始终理解从自身到图像文件夹的路径，所以如果您的结构是：

/images
/css

背景图像路径是：

../images/ddl_arrow.png

使用.. 上一级然后进入兄弟目录images 以获取文件。你可以把它放在任何地方，它会起作用。

值得注意的是，对样式使用 css 而不是在 JQuery 中添加它们更容易重用（只需将 .my-background 添加到您需要的 HTML 中）。由于您的功能文件中没有样式信息，因此它也使事情维护得更好 - 未来的您（或您的队友）会感谢您。

而且，background-position-x / background-position-y 是 not standard，因此不能在任何地方都依赖 background-position: x-value y-value 现在更好。

【讨论】：

【解决方案3】：

试试：

$(boxCtrl).css('background-image', 'url("./Scripts/CBox/folder/ddl_arrow.png")');

【讨论】：

我正在尝试将 CBox 作为可再发行控件。所以不能使用确切的文件夹名称。
当我找到替代方案时会回到这个问题。