Symfony2 - Assetic - загрузка изображений в CSS

У меня есть CoreBundle, который содержит основные css файлы и изображения. Теперь у меня проблема при загрузке изображения из css; изображение не отображается.

 background-image:url(../images/file.png)

(с полным путем он работает)

Я установил активы с помощью команды: assets:install web, и я вижу файлы изображений и css под web/bundles/cmtcore/(css|images).

Здесь структура файла внутри основного пакета:

/CoreBundle
    /Resources
        /public
            /css
                /main.css
            /images
                /file.png

И вот как я загружаю файл css в шаблон:

 {% stylesheets '@CmtCoreBundle/Resources/public/css/*' %}
        <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
 {% endstylesheets %}

Благодарим вас за помощь.

Ответ 1

используйте фильтр cssrewrite из Assetic bundle

В config.yml:

assetic:
    debug:          %kernel.debug%
    use_controller: false
    filters:
        cssrewrite: ~

И затем назовите свои таблицы стилей следующим образом:

 {% stylesheets 'bundles/cmtcore/css/*' filter='cssrewrite' %}
        <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
 {% endstylesheets %}

О, и не забудьте использовать php app/console assetic:dump

Ответ 2

Было несколько проблем с ccsrewrite:

фильтр CssRewrite не работает при использовании синтаксиса @MyBundle в AsseticBundle для ссылки на активы. Это известное ограничение.

Вот PHP-версия для cssrewrite:

<?php 
    foreach ($view['assetic']->stylesheets(array(
        'bundles/test/css/foundation/foundation.css',
        'bundles/test/css/foundation/app.css',
        'bundles/test/css/themes/adapzonManager.css'), array('cssrewrite')) as $url):
?>
    <link rel="stylesheet" href="<?php echo $view->escape($url) ?>" />
<?php endforeach; ?>

Ответ 3

Я решил проблему, следуя инструкциям на этом сайте: http://www.craftitonline.com/2011/06/symfony2-beautify-with-assetic-and-a-template-part-ii/

Фактическая проблема заключается в том, что вы ссылаетесь на свои ресурсы пакета в абсолютном выражении, но должны ссылаться на них относительно.

{% stylesheets filter='cssrewrite' output='css/*.css'
    'bundles/blistercarerisikobewertung/css/*'  %}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}

Очистите кеш и снова установите свои ресурсы

Ответ 4

Что касается ответа Янна, на самом деле вам не нужно повторно устанавливать активы после каждого изменения, если вы используете опцию --symlink.

Обратите внимание, однако, что запуск поставщиков script перезапишет символические ссылки, поэтому вам нужно будет удалить папки bundles/* и снова установить активы с помощью параметра --symlink после запуска поставщиков script.

Ответ 5

Я разработал небольшой пакет с дополнительным фильтром для решения этой проблемы. Вы можете найти его на github: https://github.com/fkrauthan/FkrCssURLRewriteBundle.git

С этим пакетом @Notation for assetic работает, если у вас есть пути relativ в вашем файле css.

Ответ 6

Я решил это с помощью htaccess:

Мои активы хранятся в src/Datacode/BudgetBundle/Resources/public/(css | img | js), а параметр assetic output установлен на запись: bundles/datacodebudget/css/styles.css(в веб-каталоге)

В моем css я использую относительный путь../для ссылки на изображения.

Вот правило .htaccess:

# Make image path work on dev
# i.e. /app_dev.php/bundles/datacodebudget/img/glyphicons-halflings-white.png rewrites to /bundles/datacodebudget/img/glyphicons-halflings-white.png
RewriteRule ^app_dev\.php/(.*)/(.*)/img/(.*)$ /$1/$2/img/$3 [L]

Мой css загружается следующим образом:

{% stylesheets
    '@DatacodeBudgetBundle/Resources/public/css/bootstrap.css'
    '@DatacodeBudgetBundle/Resources/public/css/bootstrap-responsive.css'
    '@DatacodeBudgetBundle/Resources/public/css/styles.css' 
    '@DatacodeBudgetBundle/Resources/public/css/chosen.css' output="bundles/datacodebudget/css/styles.css"
%}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}

В моем файле config.yml у меня есть:

assetic:
    use_controller: true

Какой (без перезаписи htaccess) вызывает загрузку изображений, поскольку относительный путь для изображения находится в app_dev.php/bundles/datacodebudget/img/someimage.jpg. Использование фильтра cssrewrite не работает, потому что тогда он перезаписывает.. /img../../../../Resources/public/img/, который разрешает ресурсы /public/img.

Используя метод htaccess, загрузка изображений прекрасна, и мне нужно только запустить assetic: dump/assets: install, когда я добавляю новые изображения или хочу нажимать изменения в процессе производства.

Ответ 7

Я решил эту проблему, постоянно создавая папку "images" с изображениями внутри папки "symfony_root/web/". Результат: "symfony_root/web/images/" - и он отлично работает!

Ответ 8

У меня есть аналогичная проблема, и я смотрел по крайней мере на один день, и я не уверен, что есть хорошее практическое решение этой проблемы. Я рекомендую использовать Assetic для обработки javascript и css, а затем просто помещаю ваши изображения в docroot вашего веб-сайта. Например, если у вас есть файл css, который ссылается на файл.. /images/file.png, просто создайте папку с изображениями под своим docroot и поместите файл .png туда. Это, безусловно, не лучшее теоретическое решение, но это единственное, что я мог найти, что на самом деле работает.

Ответ 9

Я "решил" это, загрузив файл css по-разному:

<link rel="stylesheet" href="{{ asset('bundles/cmtcore/css/main.css') }}" type="text/css" media="all" />

Так делается в Acme/DemoBundle.

Я оставлю этот вопрос нерешенным, потому что это кажется глупым.