一个asp.net MVC 3项目中的ExtJS 4 MVC应用程序图片路径问题答案

【问题标题】：ExtJS 4 MVC application in an asp.net MVC 3 project image path problems一个asp.net MVC 3项目中的ExtJS 4 MVC应用程序图片路径问题
【发布时间】：2012-09-14 13:58:00
【问题描述】：

快捷方式： EXT = Ext JS 4 应用程序 ASP = Asp.Net MVC3 应用程序

我在加载 Ext JS 4 应用程序视图中设置的图像时遇到问题。该应用程序是 Asp.NET MVC 3 项目的一部分。在我的 EXT 文件夹中，我有 Sencha MVC 应用程序的经典结构。在 ASP 项目中，EXT 文件夹位于：root + "/Sencha/WebClient/"。在 EXT 的视图中，我将路径设置为按钮的图标，如下所示：

icon: 'images/common/desktop/btnStart.png'

图像无法加载，因为我认为 .js 文件在 ASP 视图文件夹中执行。我已将 appFolder 设置为“/Sencha/WebClient/”，以便 EXT 找到视图、控制器等，但图标路径仍保留为“images/common/desktop/btnStart.png” “/Sencha/WebClient/images/common/desktop/btnStart.png”。

有没有办法解决这个问题？

【问题讨论】：

为启动 ExtJs 应用程序的 HTML 文档提供服务的 ASP MVC 控制器 URL 是什么？您需要设置相对于该 URL 的图像路径。

标签： asp.net-mvc-3 image path extjs4

【解决方案1】：

它不会那样工作。应用为 css 样式的图标属性。我建议在 DOM 中看起来像

style="...; background-image: url(images/common/desktop/btnStart.png);"

所以不管 js 脚本放在哪里都没有关系。此图像路径是相对于当前页面的 url，因此不会按预期应用此样式。但是，如果您指定绝对路径，它将起作用。

我可以建议您使用sass/scss + compass，并使用使用图像路径的css 类。你可以设置你的图片路径和更多的使用 mixins 来应用你指定的背景图片

@mixin backgroundImage($img) {
    $imagesRoot: '/Sencha/WebClient/images/';
    @include background-image($imagesRoot + $img);  
}

.btnStart {
    @include backgroundImage('common/desktop/btnStart.png');
}

然后在按钮配置中使用

iconCls: 'btnStart'

【讨论】：