Question

我有一个ASP MVC应用程序，它使用jQuery UI作为datepicker和accordion小部件。当在本地运行时，当部署到azure上的dev / debug web应用程序时，它们的图标（按钮更改月份，手风琴箭头）显示正常。

但是，一旦部署到发布/生产Web应用程序，他们就不会。小部件仍然可以正常工作，但由于某种原因，它拒绝包含与小部件关联的jquery ui图像。它确实尝试加载资源，但它返回404。

我正在部署到Azure，并且Azure应用程序配置与天蓝色端的调试/发布Web应用程序相同。

我不确定我的项目中哪些配置文件与问题相关，所以我会等到发布这些文件，直到有人告诉我。

我在我的bundle配置中使用了缩小的jquery ui css，我知道它捆绑正确，因为它实际上试图在生产中加载图标，但在图标本身上返回404。

内容
- 图像
  - UI-icons_222222_256x240.png
- 的jquery-ui.min.css

并在jquery-ui.min.css中从相对路径中查找它们，如

background-image:url("images/ui-icons_222222_256x240.png")

因此，当它被部署到发布版本时，它必须重新安排内容目录相对于css文件或其他内容。

Answer 1

假设您的文件被标记为内容并且在相对于ASP App Root的路径中，请确保您的捆绑包在每个配置中都是相同的。像这样：

            bundles.Add(new StyleBundle("~/Content/cssthemebundle").Include(
            "~/Content/themes/base/jquery.ui.core.css",
            "~/Content/themes/base/jquery.ui.accordion.css",
            "~/Content/themes/base/jquery.ui.tabs.css",
            "~/Content/themes/base/jquery.ui.datepicker.css",
            "~/Content/themes/base/jquery.ui.theme.css"));

这适用于我们的解决方案，无需配置。我们确实遇到了一个问题，发布资源路径被剔除了，但是这个捆绑路径现在运行良好。

注意：主题css文件中引用的资源图像是相对于主题文件夹的，而不是“〜/”。所以jquery-ui css网址应保持不变。

Answer 2

我有同样的问题。只是要确认问题出在图片路径上-尝试用完整的URL替换图片路径，例如

.ui-widget-content .ui-icon
{
  background-image: url("http://your_site/Content/themes/base/images/ui-icons_444444_256x240.png");
}

那行得通！

但是，由于建议对库文件进行更改，因此无法进行此更改。因此，将图像移动到同一文件夹似乎是可行的。

请参阅以下链接。尽管它与telerik控件有关，但问题相似。

https://www.telerik.com/forums/asp-mvc-css-minification-breaks-kendo-bootstrap#5_PIevmzV0iIW0G9Kx8R-g

希望它可以帮助某人。

祝你好运！

jQuery UI图标显示在调试部署中但不显示

2 个答案: