1

我在我的 jsf 项目中使用了一些 jquery 函数，我想通过这个函数从我的项目的资源文件夹中获取一张图像：

我测试了这个：

$('.ui-datagrid-column').live('mousemove',function(){
            $(this).css('background-image', '../resources/images/vert_degrade.PNG');        

        });

但它没有找到图像文件

这是结构：在此处输入图像描述

这个文件在页面目录中

我怎样才能做到这一点

4

1 回答 1

1

如果你在 CSSbackground-image属性中指定了一个相对 URL，那么它就变成了相对于当前请求的包含 JS 代码的资源的请求 URL。因此，如果您在 JS 文件中声明它，则它与 JS 文件本身的请求 URL 相关。或者，如果您在 JSF 页面中声明它，那么它与 JSF 文件本身的请求 URL 相关。正如大多数初学者错误地假设的那样，它与服务器端磁盘文件系统路径中的物理位置无关。

因此，在您的情况下，该相对 URL 显然是错误的。在 JSF Web 应用程序中，JSF 资源处理程序的 URL 前缀/javax.faces.resource甚至是 servlet 映射之类的面孔/faces/*是最可能导致相对 URL 解析错误的原因。您需要查看请求 URL 并从中提取正确的相对 URL。

或者，如果该 JS 代码位于一个<script>或<h:outputScript>一个 JSF 页面中，那么您还可以使用#{resource}EL 中的隐式映射将资源标识符转换为完整的资源 URL：

例如

<h:outputScript>
    $('.ui-datagrid-column').live('mousemove',function(){
        $(this).css('background-image', '#{resource['images/vert_degrade.PNG']}');        
    });
</h:outputScript>

更好的是在一个独立的 CSS 文件中创建一个 CSS 声明，<h:outputStylesheet>因为它支持评估 CSS 文件中的 EL 表达式。

.vert-degrade {
    background-image: url('#{resource['images/vert_degrade.PNG']}');
}

和

$('.ui-datagrid-column').live('mousemove',function(){
    $(this).addClass('vert-degrade');
});

这样JS代码就可以保存在自己的JS文件中。

于 2013-04-12T15:08:25.540 回答