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

Я использую Symfony 2.3.25 и очень плохо знаком с фреймворком. У меня есть Symfony для среды разработки через мой apache config. У меня проблема с получением изображений, на которые ссылаются в 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

/images/masthead-4.jpg

  • ../images/masthead-4.jpg

../images/masthead-4.jpg

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

введите описание изображения здесь

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

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

введите описание изображения здесь

Наконец, если я добавлю изображение 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 %}

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

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

Другие решения

Других решений пока нет …