Проблема с путями изображения CSS внутри AppBundle по умолчанию

0

Я использую Symfony 2.3.25 и очень новичок в инфраструктуре, в которой у меня есть Symfony для среды dev через конфигурацию apache. Проблема, с которой я сталкиваюсь, - это правильно загружать изображения, указанные в CSS. Я использую приложение AppBundle по умолчанию, которое поставляется с Symfony.

Моя файловая структура выглядит следующим образом:

symfony_root/
  app/
    Resources/
      public/
        css/
          style.scss
        js/
          script.js
        images/
          masthead-4.jpg

Я храню исходные файлы в symfony_root/app/Resources/public, а затем Assetic компилирует их и выводя на symfony_root/web/. Это происходит в моей конфигурации Assetic, которая выглядит следующим образом:

symfony_root/приложение /Config/config.yml

assetic:
    debug:          "%kernel.debug%"
    use_controller: false
    bundles:        [ ]
    #java: /usr/bin/java
    read_from:      %kernel.root_dir%/Resources/public/
    write_to:       %kernel.root_dir%/../web/
    filters:
        cssrewrite: ~
        sass: 
            apply_to: "\.scss$"
            bin: path_to_sass_which_works
        #closure:
        #    jar: "%kernel.root_dir%/Resources/java/compiler.jar"
        #yui_css:
        #    jar: "%kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar"
    assets:
        bootstrap_js:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap-sass/assets/javascripts/bootstrap.js
        bootstrap_css:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap-sass/assets/stylesheets/_bootstrap.scss
            filters: [cssrewrite]

Теперь в моем файле layout.twig, который, как я понимаю, принимает файлы css, определенные здесь, запускает их через фильтры, как определено здесь или в config.yml, и выводит файлы в веб-каталог. У меня есть следующее:

symfony_root/приложение/Ресурсы/просмотров /layout.html.twig

{% stylesheets output='css/application.css'
  'css/style.css.scss'
%}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}

Наконец, в моем файле style.css.scss у меня есть следующая проблемная строка:

.is--site_landing {
  background: transparent image-url('../images/masthead-4.jpg') top center no-repeat;
  background-size: cover;
}

Образ-url в css не найден и не отображается в браузере. Я попытался изменить URL-адрес в css на разные пути.

  • /images/masthead-4.jpg

Изображение 174551

  • .. /images/masthead-4.jpg

Изображение 174551

  • Топовый-4.jpg

Изображение 174551

Я также попытался добавить фильтр cssrewrite, когда таблицы стилей включены в файл layout.html.twig, но он изменяет css на неправильный путь, например:

 {% stylesheets filter='cssrewrite' output='css/application.css'
      'css/style.css.scss'
    %}

Изображение 174551

Наконец, если я помещаю изображение masthead-4.jpg в web/images/masthead-4.jpg, я могу перейти к изображению через URL-адрес, и он работает правильно. Кроме того, любые изображения, включенные в обычный тег изображения, на который ссылается Symfony, работают правильно. Это только изображения, включенные в CSS, которые не указаны правильно.

Это работает:

      {% image 'images/masthead-4.jpg' %}
        <img class="img-circle hidden-xs" alt="Pass Rates" width="80" src="{{ asset_url }}" alt="Example" />
      {% endimage %}

Спасибо, и любая помощь будет оценена по достоинству.

Теги:
assetic

1 ответ

0

Что вам не хватает, это фильтр cssrewrite. Кроме того, путь к вашим файлам css выглядит немного странным. Попробуйте что-то вроде (в вашем layout.html.twig)

{% stylesheets output='bundles/app/css/application.css'
  'bundles/app/css/style.css.scss'
  filter='cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}

Проверьте это для получения более подробной информации

  • 0
    Спасибо за помощь, Томаш, но упомянутое вами решение не сработало. В файле макета я изменил следующее: {% stylesheets output = 'bundles / app / css / application.css' 'css / style.css.scss' filter = 'cssrewrite'%} В браузере не работает фоновая ссылка , Если я открою инспектор браузера, ссылка будет перечеркнута, однако, если я щелкну правой кнопкой мыши и открою ссылку в новой вкладке, появится ссылка: i.imgur.com/FVoWlT1.png
  • 0
    Мой фоновый URL в моем CSS-файле по-прежнему таков: "background: transparent image-url ('../ images / masthead-4.jpg') top center no-repeat;"
Показать ещё 3 комментария

Ещё вопросы

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