it-swarm.com.ru

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 %}

Спасибо за вашу помощь заранее.

59
LBridge

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

В 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

54
Inoryy

Было несколько проблем с 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; ?>
17
user257980

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

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

13
Yann

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

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

6
fkrauthan

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

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

6
tystr

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

1
yura

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

1
Matt Davis

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

0
adavea