Rails 3.1 và Tài sản hình ảnh

156

Tôi đã đặt tất cả hình ảnh của mình cho chủ đề quản trị viên vào thư mục tài sản trong thư mục có tên là quản trị viên. Sau đó, tôi liên kết với nó như bình thường tức là.

# Ruby    
image_tag "admin/file.jpg" .....
#CSS
.logo{ background:url('/assets/images/admin/logo.png');

FYI. Chỉ để thử nghiệm, tôi chưa sử dụng thẻ property_path vì tôi chưa biên dịch tài sản của mình.

Ok tất cả đều tốt cho đến khi tôi quyết định cập nhật một hình ảnh. Tôi đã thay thế một số màu nhưng khi tải lại hình ảnh theo kiểu mới không hiển thị. Nếu tôi xem hình ảnh trực tiếp trong trình duyệt thì nó vẫn hiển thị hình ảnh cũ. Đi thêm một bước nữa tôi đã phá hủy thư mục hình ảnh quản trị. Nhưng nó đã phá vỡ không có gì tất cả các hình ảnh vẫn đang được hiển thị. Và vâng, tôi đã xóa bộ nhớ cache và đã thử trên nhiều trình duyệt.

Có một số loại bộ nhớ đệm hình ảnh đang diễn ra? Đây chỉ là sự phát triển cục bộ bằng cách sử dụng pow để phục vụ các trang.

Ngay cả việc phá hủy toàn bộ thư mục hình ảnh, hình ảnh vẫn đang được phục vụ.

Tui bỏ lỡ điều gì vậy?

ruby-on-rails ruby-on-rails-3

— Lee
nguồn

2

đó không phải là trường hợp với 3.1 sử dụng đường ống tài sản. Bạn sẽ sử dụng lệnh rake tài sản: tiền biên dịch sẽ nén các tệp đó và chuyển chúng sang tệp công khai

— Lee

2

Việc chuyển chúng vào thư mục công cộng hoạt động tốt, tất cả đều hơi lạ vì chúng hoạt động tốt khi được phục vụ từ thư mục tài sản. Có lẽ phải chờ thêm tài liệu vào ngày 3.1.

— Lee

3

Tôi hiểu sự thất vọng của bạn. Rõ ràng các ứng cử viên phát hành không nhận được tài liệu rất tốt.

— tybro0103

1

Để chúng trong tài sản, chỉ không bao gồm một đường dẫn thư mục. Xem câu trả lời của tôi dưới đây.

— Andrew

226

Trong 3.1, bạn chỉ cần thoát khỏi phần 'hình ảnh' của đường dẫn. Vì vậy, một hình ảnh sống /assets/images/example.pngthực sự sẽ có thể truy cập được trong yêu cầu nhận tại url này -/assets/example.png

Vì assets/imagesthư mục được tạo cùng với ứng dụng 3.1 mới, đây là quy ước mà có lẽ họ muốn bạn tuân theo. Tôi nghĩ đó là nơiimage_tag sẽ tìm kiếm nó, nhưng tôi chưa thử nó.

Ngoài ra, trong bài phát biểu RailsConf, tôi nhớ rằng D2h nói rằng public folderkhông nên có nhiều trong đó nữa, chủ yếu chỉ là các trang lỗi và một favicon.

— Lee McAlilly
nguồn

Vâng, tôi đã chơi với phân bổ này và họ có một số cách để làm cho nó dễ dàng hơn. Có, đặt chúng vào thư mục tài sản của tôi hoạt động nhưng sau đó bạn có thể sử dụng thẻ tài sản. Vì vậy, tôi đang chờ đợi để xem thêm thông tin nào được đưa ra.

— Lee

1

Cảm ơn, đã giúp tôi rất nhiều, quá. Đây là thứ khiến tôi phát điên khi một anh chàng cố gắng học Rails đến từ các khung phát triển web khác.

— jn29098

6

và điều gì sẽ xảy ra nếu hai thư mục khác nhau chứa cùng một tên tệp?

— Hady Elsahar

6

Không phải là DH2 sao?

— Tiago Franco

1

Không chắc chắn tại sao họ phải thay đổi một cái gì đó đã làm việc.

— Tastybrownies 6/12/13

98

Bạn sẽ muốn thay đổi phần mở rộng của tệp css của bạn từ .css.scssthành .css.scss.erbvà làm:

background-image:url(<%=asset_path "admin/logo.png"%>);

Bạn có thể cần thực hiện "làm mới cứng" để xem các thay đổi. CMD + SHIFT + R trên trình duyệt OSX.

Trong sản xuất, đảm bảo

rm -rf public/assets    
bundle exec rake assets:precompile RAILS_ENV=production

xảy ra khi triển khai.

— tybro0103
nguồn

44

Có những người trợ giúp hình ảnh mới trong sass: image_url, image_path, ... Có thể tìm thấy nhiều hơn ở đây: edgeguides.rubyonrails.org/asset_pipeline.html Không cần sử dụng erb làm tiền xử lý nữa

— Martin Wawrusch

1

Tôi đã thử các trình trợ giúp sass-rails (image_url và image-url) vào một tệp css.scss nhưng dường như nó không được giải thích. Có manh mối nào không?

— invaino

2

Các tệp scss được tạo được đặt tên theo .css.scss theo mặc định, chưa có hiện tượng tắt giường nào xảy ra

— Adrian Macneil

2

Vì một số lý do, url hình ảnh không hoạt động với tôi, nhưng url tài sản ('myimage.png', hình ảnh) hoạt động hoàn hảo. (Rails 3.1)

— Elad

1

Trong trường hợp bất kỳ ai nâng cấp từ 3.0 đều thắc mắc, bạn có thể đổi tên biểu định kiểu của mình .cssthành .css.erb(sau khi bạn chuyển chúng vào app/assetsđể xử lý erb mà không cần sass.

— William Denniss

22

Đối với những gì nó có giá trị, khi tôi làm điều này tôi thấy rằng không có thư mục nào được đưa vào đường dẫn trong tệp css. Chẳng hạn, nếu tôi có app/assets/images/example.png, và tôi đặt nó trong tập tin css của mình ...

div.example { background: url('example.png'); }

... sau đó bằng cách nào đó nó hoạt động kỳ diệu. Tôi đã tìm ra điều này bằng cách chạy rake assets:precompiletác vụ, nó chỉ hút mọi thứ ra khỏi tất cả các đường dẫn tải của bạn và bỏ nó vào một thư mục ngăn kéo rác : public/assets. Thật là mỉa mai, IMO ...

Trong mọi trường hợp, điều này có nghĩa là bạn không cần đặt bất kỳ đường dẫn thư mục nào, tất cả mọi thứ trong các thư mục tài sản của bạn đều sẽ sống trong một thư mục lớn. Làm thế nào hệ thống này giải quyết xung đột tên tệp không rõ ràng, bạn có thể cần phải cẩn thận về điều đó.

Loại bực bội không có tài liệu tốt hơn ngoài kia cho sự thay đổi lớn này.

— Andrew
nguồn

3

Khi có xung đột đặt tên, đường dẫn đầu tiên xuất hiện trong mảng config.assets.paths là tệp được chọn. Điều này có thể tránh được bằng cách sử dụng trình asset_path()trợ giúp và chỉ định thư mục.

— Joseph Ravenwolfe

6

Điều này "hoạt động kỳ diệu" bởi vì tệp css và hình ảnh ở cùng một vị trí. Tham chiếu tệp CSS có liên quan đến vị trí của tệp css.

— Bill Leeper

Đường ống tài sản có thể là một chút của hộp đen, đặc biệt là đối với các nhà phát triển front-end, nhưng nó cung cấp rất nhiều tính năng tuyệt vời như không phải lo lắng về đường dẫn tệp và bộ nhớ cache tự động.

— Miles

16

Trong rails 4 bây giờ bạn có thể sử dụng url-url của trình trợ giúp css và sass:

div.logo {background-image: image-url("logo.png");}

Nếu hình nền của bạn không hiển thị, hãy xem xét cách bạn tham chiếu chúng trong biểu định kiểu của bạn.

— lflores
nguồn

1

Điều này là chính xác (đối với đường ray 4). Bình chọn câu trả lời này lên!

— ahnbizcad

Rails 'giúp bạn ra ngoài' bằng cách nhập từ khóa url cũng như chuỗi. Điều này có nghĩa là bạn có thể làm những việc như thế. div.logo {background: image-url("logo.png") no-repeat center;}

— Antony Denyer

10

khi tham chiếu hình ảnh trong CSS hoặc trong thẻ IMG, hãy sử dụng image-name.jpg

trong khi hình ảnh thực sự nằm dưới ./assets/images/image-name.jpg

— Tilo
nguồn

Tôi nghĩ điều này là sai khi nói về CSS - sử dụng rails 3.1.0.rc4 khi tôi sử dụng background: url('sort_asc_disabled.png')nó hoạt động cho tệp ứng dụng / tài sản / hình ảnh / sort_asc_disables.png.

— wonderfulthunk

2

http://railscasts.com/episodes/279-under Hiểu-the-asset-pipeline

Railscast này (video Hướng dẫn Rails về đường ống tài sản) cũng giúp giải thích rất nhiều về các đường dẫn trong đường dẫn tài sản. Tôi thấy nó khá hữu ích, và thực sự đã xem nó một vài lần.

Giải pháp tôi chọn là @Lee McAlilly ở trên, nhưng bản railscast này đã giúp tôi hiểu lý do tại sao nó hoạt động. Hy vọng nó giúp!

— botbot
nguồn

0

Các đường ống tài sản trong đường ray cung cấp một phương pháp cho điều chính xác này.

Bạn chỉ cần thêm image_path ('tên tệp hình ảnh') vào tệp css hoặc scss của bạn và đường ray sẽ đảm nhiệm mọi thứ. Ví dụ:

.logo{ background:url(image_path('admin/logo.png'));

(lưu ý rằng nó hoạt động giống như trong chế độ xem .erb và bạn không sử dụng "/ nội dung" hoặc "/ tài sản / hình ảnh" trong đường dẫn)

Rails cũng cung cấp các phương thức trợ giúp khác và có một câu trả lời khác ở đây: Làm cách nào để sử dụng hình ảnh tham chiếu trong Sass khi sử dụng Rails 3.1?

— benrugg
nguồn

Tôi biết câu hỏi này đã được vài năm tuổi, nhưng đây là trang đầu tiên tôi tìm thấy trên google khi tìm kiếm câu hỏi này, vì vậy thật tuyệt vời khi chọn một câu trả lời để người khác có thể dễ dàng tham khảo điều này!

— benrugg