Symfony2 - Assetic - tải hình ảnh trong CSS

Question

Tôi có một CoreBundle chứa các tệp và hình ảnh css chính. Bây giờ tôi có một vấn đề khi tôi tải một hình ảnh từ css; hình ảnh không được hiển thị.

background-image:url(../images/file.png) 

(với một đường dẫn đầy đủ nó hoạt động)

Tôi đã cài đặt các tài sản bằng cách sử dụng lệnh: assets:install web và tôi có thể xem các tập tin hình ảnh và css dưới web/bundles/cmtcore/(css|images).

Dưới đây là cấu trúc tập tin bên trong bó cốt lõi:

/CoreBundle 
    /Resources 
     /public 
      /css 
       /main.css 
      /images 
       /file.png 

Và dưới đây là cách tôi tải các tập tin css vào mẫu:

{% stylesheets '@CmtCoreBundle/Resources/public/css/*' %} 
     <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" /> 
{% endstylesheets %} 

Cảm ơn bạn đã giúp đỡ của bạn trước.

Answer 1

sử dụng bộ lọc cssrewrite từ Assetic bó

Trong config.yml:

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

Và sau đó gọi stylesheets của bạn như thế này:

{% stylesheets 'bundles/cmtcore/css/*' filter='cssrewrite' %} 
     <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" /> 
{% endstylesheets %} 

Oh và đừng quên sử dụng php app/console assetic:dump

Answer 2

tôi "giải quyết" này bằng cách load file css khác nhau:

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

Đây là cách nó được thực hiện trong Acme/DemoBundle.

Tôi sẽ để lại câu hỏi này chưa được giải quyết vì đây có vẻ ngớ ngẩn.

Answer 3

tôi giải quyết vấn đề bằng cách sau các hướng dẫn trên trang web này: http://www.craftitonline.com/2011/06/symfony2-beautify-with-assetic-and-a-template-part-ii/

Vấn đề thực tế là bạn tham khảo tài nguyên bó tuyệt đối, nhưng phải tham khảo họ tương đối.

{% stylesheets filter='cssrewrite' output='css/*.css' 
    'bundles/blistercarerisikobewertung/css/*' %} 
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" /> 
{% endstylesheets %} 

Xóa bộ nhớ đệm và cài đặt tài sản của bạn một lần nữa

Answer 4

Về câu trả lời Yann của, trên thực tế bạn không cần phải cài đặt lại tài sản sau mỗi lần thay đổi nếu bạn sử dụng tùy chọn --symlink của bạn. Tuy nhiên, lưu ý rằng việc chạy tập lệnh cài đặt của nhà cung cấp sẽ ghi đè lên các liên kết tượng trưng, ​​vì vậy bạn cần phải xóa các thư mục bundles/* và cài đặt lại các tài sản sau khi chạy tập lệnh của nhà cung cấp.

Answer 5

Có vài vấn đề với ccsrewrite:

bộ lọc CssRewrite không hoạt động khi sử dụng cú pháp @MyBundle trong AsseticBundle để tham khảo các tài sản. Đây là một giới hạn được biết đến.

Đây là phiên bản php cho 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 6

Tôi có một vấn đề tương tự, và tôi đã nhìn xung quanh trong vòng ít nhất một ngày, và tôi không tin có một giải pháp thực tiễn tốt để này vấn đề. Tôi khuyên bạn nên sử dụng Assetic để xử lý javascript và css, và sau đó chỉ cần đặt hình ảnh của bạn trong docroot của trang web của bạn. Ví dụ: nếu bạn có tệp css tham chiếu ../images/file.png, chỉ cần tạo và thư mục hình ảnh trong docroot của bạn và đặt tệp.png vào đó. Điều này chắc chắn không phải là giải pháp lý thuyết tốt nhất, nhưng đó là giải pháp duy nhất tôi có thể tìm thấy thực sự hiệu quả.

Answer 7

Tôi đã phát triển một gói nhỏ với bộ lọc bổ sung để giải quyết vấn đề này. Bạn có thể tìm thấy nó trên github: https://github.com/fkrauthan/FkrCssURLRewriteBundle.git

Với gói này @Notation for assetic works nếu bạn có đường dẫn relativ trong tệp css của bạn.

Answer 8

tôi giải quyết này sử dụng htaccess:

tài sản của tôi được lưu trữ trong src/datacode/BudgetBundle/Resources/public/(css | img | js) và tham số đầu ra assetic được thiết lập để viết thư cho: bó/datacodebudget /css/styles.css (trong thư mục web)

Trong css tôi sử dụng đường dẫn tương đối ../ để tham khảo hình ảnh.

Đây là quy tắc .htaccess:

css của tôi được nạp như sau:

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

Trong file config.yml của tôi có:

assetic: 
    use_controller: true 

nào (mà không cần ghi đè htaccess) khiến cho các hình ảnh không tải vì đường dẫn tương đối của hình ảnh là ở app_dev.php/bundles/datacodebudget/i mg/someimage.jpg. Sử dụng bộ lọc cssrewrite không hoạt động vì nó viết lại ../img thành ../../../../Resources/public/img/ để phân giải thành Tài nguyên/công khai/img.

Bằng cách sử dụng phương pháp htaccess tải hình ảnh tốt và tôi chỉ cần chạy assetic: dump/asset: cài đặt khi tôi thêm hình ảnh mới hoặc muốn đẩy thay đổi vào sản xuất.

Answer 9

Tôi đã giải quyết vấn đề này bằng cách tạo vĩnh viễn thư mục 'hình ảnh' với hình ảnh trong thư mục 'symfony_root/web /'. Kết quả: 'symfony_root/web/images /' - và nó trở nên tuyệt vời!