Program Tip

Symfony2-Assetic-CSS에서 이미지로드

programtip 2020. 12. 8. 19:52
반응형

Symfony2-Assetic-CSS에서 이미지로드


주요 CSS 파일과 이미지가 포함 된 CoreBundle이 있습니다. 이제 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 %}

미리 도와 주셔서 감사합니다.


cssrewriteAssetic 번들 필터 사용

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


ccsrewrite에는 몇 가지 문제가있었습니다.

AsseticBundle에서 자산을 참조하기 위해 @MyBundle 구문을 사용할 때 CssRewrite 필터가 작동하지 않습니다. 이것은 알려진 제한 사항입니다.

다음은 cssrewrite 용 PHP 버전입니다.

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

이 사이트의 지침에 따라 문제를 해결했습니다. 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 %}

캐시를 지우고 자산을 다시 설치하십시오.


Yann의 답변과 관련하여 --symlink옵션 을 사용하면 실제로 변경 할 때마다 자산을 다시 설치할 필요가 없습니다 .

그러나 공급 업체 설치 스크립트를 실행하면 심볼릭 링크를 덮어 쓰므로 공급 업체 스크립트를 실행 한 후 bundles/*폴더 를 삭제 하고 --symlink옵션을 사용하여 자산을 다시 설치해야합니다 .


I have developed a small bundle with a extra filter to solve this issue. You can find it on github: https://github.com/fkrauthan/FkrCssURLRewriteBundle.git

With this bundle the @Notation for assetic works if you have relativ paths in your css file.


I solved this using htaccess:

My assets are stored in src/Datacode/BudgetBundle/Resources/public/(css|img|js) and the assetic output parameter is set to write to: bundles/datacodebudget/css/styles.css (in web directory)

In my css i use the relative path ../ to reference images.

Here is the .htaccess rule:

# 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]

My css is loaded as follows:

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

In my config.yml file i have:

assetic:
    use_controller: true

Which (without the htaccess rewrite) causes the images not to load since the relative path for the image is at app_dev.php/bundles/datacodebudget/img/someimage.jpg. Using the cssrewrite filter doesn't work either because then it rewrites ../img to ../../../../Resources/public/img/ which resolves to Resources/public/img.

By using the htaccess method the images load fine and I only need to run assetic:dump / assets:install when i add new images or want to push changes to production.


I solved this issue by permanently creating 'images' folder with images inside in 'symfony_root/web/' folder. Result: 'symfony_root/web/images/' - and it becomes work great!


I have a similar problem, and I've looked around for at least a day, and I'm not convinced there's a good practical solution to this problem. I recommend using Assetic to handle javascript and css, and then just putting your images in the docroot of your web site. For example, if you have a css file that references ../images/file.png, just create and images folder under your docroot and put file.png in there. This is definitely not the best theoretical solution, but it's the only one I could find that actually works.


I "solved" this by loading the css file differently:

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

This is the way it is done in Acme/DemoBundle.

I'll leave this question unsolved because this seems silly.

참고URL : https://stackoverflow.com/questions/7044631/symfony2-assetic-load-images-in-css

반응형

'Program Tip' 카테고리의 다른 글

Entity Framework 및 MongoDb  (0) 2020.12.08
D의 문법은 정말 문맥이없는가요?  (0) 2020.12.08
Python 3으로 URL 디코딩  (0) 2020.12.08
Javascript에서 NaN 값이 같은지 비교  (0) 2020.12.08
MurmurHash-무엇입니까?  (0) 2020.12.08