Question

我正在使用jQuery-ui datepicker，但我遇到图像和路径问题。这是我链接我的css的方式：

    {% stylesheets  '@BackendBundle/Resources/public/css/bootstrap.min.css' 
                    '@BackendBundle/Resources/public/css/bootstrap-responsive.min.css' 
                    '@HotelBundle/Resources/public/css/ui-lightness/jquery-ui-1.8.20.custom.css' 
                    '@HotelBundle/Resources/public/css/encargado.css'
               output='css/encargado.css' %}
        <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
    {% endstylesheets %}
{% endblock %}

{% block javascripts %}
    {% javascripts  '@BackendBundle/Resources/public/js/jquery-1.7.2.min.js' 
                    '@BackendBundle/Resources/public/js/modernizr-2.5.3-respond-1.1.0.min.js' 
                    '@HotelBundle/Resources/public/js/jquery-ui-1.8.20.custom.min.js' 
                    output='js/backend.js' %}
        <script src="{{ asset_url }}" type="text/javascript"></script>
    {% endjavascripts %}

我将文件css文件保存在那里：

../src/Gitek/HotelBundle/Resources/public/css/ui-lightness/
 - jquery-ui-1.8.20.custom.css
 - images/ui-bg_diagonals-thick_18_b81900_40x40.png;ui-bg_diagonals-thick_20_666666_40x40.png ...

我的js文件在那里：

../src/Gitek/HotelBundle/Resources/public/js/jquery-ui-1.8.20.custom.min.css

之后，我使用php app / console assetic转储资产：dump没有错误

我还使用php app / console资产安装资产：install web --symlink

并清除缓存php app / console cache：clear

我做了所有这些，我可以看到并使用我的日期选择器，但有些图片没有加载。如果我转到Chrome控制台，我可以看到这些错误：

Failed to load resource: the server responded with a status of 404 (Not Found) http://hotel.local/app_dev.php/css/images/ui-bg_highlight-soft_100_eeeeee_1x100.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://hotel.local/app_dev.php/css/images/ui-bg_gloss-wave_35_f6a828_500x100.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://hotel.local/app_dev.php/css/images/ui-bg_glass_100_f6f6f6_1x400.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://hotel.local/app_dev.php/css/images/ui-icons_ffffff_256x240.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://hotel.local/app_dev.php/css/images/ui-bg_highlight-soft_75_ffe45c_1x100.png

我认为可能问题在于css文件中的路径，但我不确定。

任何帮助？

Answer 1

1）在config.yml中启用cssrewrite过滤器：

assetic:
    filters:
        cssrewrite: ~

2）使用相对URL和cssrewrite过滤器列出css文件，例如

{% stylesheets '/bundles/backend/css/bootstrap.min.css' 
               '/bundles/backend/css/bootstrap-responsive.min.css' 
               '/bundles/hotel/css/ui-lightness/jquery-ui-1.8.20.custom.css' 
               '/bundles/hotel/css/encargado.css'
               output='css/encargado.css' filter='cssrewrite' %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}

过滤器应正确重写所有CSS网址。

Answer 2

您需要手动更新jquery-ui-1.8.20.custom.min.css文件中图像的路径。

example：

.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; }

您需要images/更新/css/ui-lightness/images/。

Answer 3

请勿修改外部插件。

像这样覆盖css：

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    background: #e6e6e6!important;
}

.ui-widget-header {
    background: #ccc!important;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    background: #dadada!important;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
.ui-widget-content {
    background: #fff!important;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
   background: #fbf9ee!important;
}

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
    background: #fef1ec!important;
}

将此css添加到您的css文件中。它将删除此类错误。

Answer 4

您需要使用cssrewrite filter + load images加载css。

{% block stylesheets %}
  {% stylesheets 'bundles/testbundle/css/jquery-ui/jquery-ui.css' filter='cssrewrite' %}
     <link rel="stylesheet" href="{{ asset_url }}" type="text/css" />
  {% endstylesheets %}
  {% image '@TestBundle/Resources/public/css/jquery-ui/images/*' %}{% endimage %}
{% endblock %}

比安装和转储资产。

symfony2 jquery ui datepicker图片

4 个答案: