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

Question

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

Заранее благодарю за помощь.

Answer 1

используйте фильтр cssrewrite из комплекта Assetic

В config.yml:

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

А затем вызывайте ваши таблицы стилей так:и не забудьте использовать php app/console assetic:dump

Answer 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; ?>

Answer 3

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

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

Answer 4

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

С этим пакетом @Notation для сборочных работ, если у вас есть релятивные пути в вашем CSS-файле.

Answer 5

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

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

Answer 6

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

Answer 7

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

Мои активы хранятся в src / Datacode / BudgetBundle / Resources / public / (css | img | js), а для параметра выходного сигнала монтирования задано значение записи в: 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/, который преобразуется в Resources / public / img.

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

Answer 8

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

Answer 9

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

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

Вот как это делается в Acme / DemoBundle.

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