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

60

У меня есть 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 %}

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

  • 0
    У меня такая же проблема. Попытка решить это с помощью папки images to css, но это не сработало
Теги:
background-image
image
assets

9 ответов

51
Лучший ответ

используйте фильтр 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

  • 13
    Моя проблема с этим решением заключается в том, что symfony пытается найти изображения в / Resources / public / css / *, когда он должен искать / bundles / mybundle / images / ... какие-нибудь идеи по этому поводу?
  • 1
    cssrewrite используется для перезаписи путей к изображениям в css. Он не «ищет изображения», он даже не знает, что такое изображение.
Показать ещё 8 комментариев
17

Было несколько проблем с 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; ?>
  • 7
    Почему бы не использовать веточку?
13

Я решил проблему, следуя инструкциям на этом сайте: 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 %}

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

  • 1
    Не нужно ли устанавливать активы после каждого изменения (даже в среде разработчика) с помощью этого метода? Я попробую это.
  • 0
    @ Tobias, да, я только что попробовал это, и вам действительно нужно устанавливать ресурсы после каждого изменения. EEEK.
Показать ещё 2 комментария
6

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

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

  • 0
    без реального понимания того, что делает ваш код, я должен сказать, что он творит чудеса. Спасибо большое =)
6

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

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

  • 0
    Или добавьте опцию в composer.json, чтобы использовать вместо нее --symlink (если вы используете 2.1+)
1

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

  • 0
    Плохой совет, если вы планируете поделиться своими пакетами с другими. Лучше хранить ресурсы в их связках.
1

Я решил это с помощью 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, когда я добавляю новые изображения или хочу нажимать изменения в процессе производства.

0

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

  • 0
    Прочитайте ответ пользователя 257980 и комментарий Клинта. Есть способ сделать это правильно.
  • 0
    На момент моего поста эти методы не работали.
-2

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

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

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

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

  • 6
    Этот метод работает, но он не использует сборочный пакет для загрузки таблицы стилей, что означает, что вы не можете добавить классные фильтры, такие как yui_css.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню