Rails 4 image-path, image-url và asset-url không còn hoạt động trong các tệp SCSS

99

Chúng ta có nên sử dụng thứ gì khác ngoài image-urlvà những thứ khác trong Rails 4 không? Chúng trả về các giá trị khác nhau mà dường như không có ý nghĩa. Nếu tôi có logo.pngtrong /app/assets/images/logo.pngvà tôi làm như sau, đây là những gì tôi nhận được:

image-url("logo.png") -> url("/images/logo.png") #obviously doesn't work
image-path("logo.png") -> "/images/logo.png"
asset-url("logo.png") -> url("/logo.png")

Tất nhiên không ai trong số này hoạt động bởi vì chúng cần ít nhất /assetsở phía trước.

CẬP NHẬT : Thực ra, tôi mới nhận thấy, làm cách nào để truy cập hình ảnh trong Rails 4? Tôi có một hình ảnh tại/app/assets/images/logo.png. Nhưng nếu tôi truy cập bất kỳ URL nào sau đây, tôi vẫn không thấy hình ảnh của mình:

http://localhost:3000/assets/logo.png
http://localhost:3000/assets/images/logo.png
http://localhost:3000/logo.png
http://localhost:3000/images/logo.png

CẬP NHẬT 2 : Cách duy nhất tôi có thể đưa ralogo.pnglà di chuyển nó vào/app/assets/stylesheetsthư mục và sau đó kéo lên:

http://localhost:3000/assets/logo.png

ruby-on-rails asset-pipeline ruby-on-rails-4

— tại.
nguồn

Hãy thử điều này:asset_path("logo.png", image)

— Marcelo De Polli

@depa - chuyển đổi đơn giản thành "/logo.png", không hiển thị hình ảnh của tôi.

— tại.

3

Bạn đang sử dụng trình trợ giúp đó bên trong .csstệp hay trong .css.scsstệp?

— Marcelo De Polli

@depa - không sử dụng bất kỳ trình trợ giúp nào. Tôi nghĩ rằng đây là một vấn đề lớn hơn về nội dung không hoạt động cho thư mục hình ảnh của tôi

— tại.

1

@depa - ồ, tôi hiểu bạn đang hỏi gì. Nó nằm trong một .css.scsstệp

— tại.

113

Tôi chỉ có vấn đề này bản thân mình. 3 điểm hy vọng sẽ giúp ích:

Nếu bạn đặt hình ảnh trong app/assets/images thư mục , thì bạn sẽ có thể gọi hình ảnh trực tiếp mà không có tiền tố trong đường dẫn. I E.image_url('logo.png')
Tùy thuộc vào nơi bạn sử dụng tài sản sẽ phụ thuộc vào phương pháp. Nếu bạn đang sử dụng nó như một thuộc background-image:tính, thì dòng mã của bạn phải là background-image: image-url('logo.png'). Điều này hoạt động cho cả bảng định kiểu less và sass. Nếu bạn đang sử dụng nó nội tuyến trong dạng xem, thì bạn sẽ cần sử dụng trình image_tagtrợ giúp tích hợp sẵn trong đường ray để xuất hình ảnh của mình. Một lần nữa, không có tiền tố<%= image_tag 'logo.png' %>
Cuối cùng, nếu bạn đang biên dịch trước nội dung của mình, hãy chạy rake assets:precompileđể tạo nội dung của bạn hoặc rake assets:precompile RAILS_ENV=productionđể sản xuất, nếu không, môi trường sản xuất của bạn sẽ không có nội dung được đánh dấu khi tải trang.

Ngoài ra, đối với những lệnh ở điểm 3, bạn sẽ cần phải thêm tiền tố vào bundle execnếu bạn đang chạy Bundler.

— cdaloisio
nguồn

1

Một điểm khác là đọc tài liệu hướng dẫn.rubyonrails.org/asset_pipeline.html . Ngoài ra, bạn có thể xem trong Gỡ lỗi nhà phát triển web của trình duyệt của mình nếu hình ảnh đang được tải?

— H.Rabiee

3

Bây giờ đây là cách bạn viết câu trả lời. Mỗi kịch bản. Dự đoán "điều gì xảy ra nếu", không có kết thúc lỏng lẻo. Một dấu hiệu của một người đã "nhìn thấy chiến đấu" (thực sự làm việc thông qua vấn đề).

— ahnbizcad

Tôi đã rất nhiều lần bị mất tích RAILS_ENV = production.

— Sixty4Bit

62

Công thức đầu tiên của bạn image_url('logo.png'), là chính xác. Nếu hình ảnh được tìm thấy, nó sẽ tạo đường dẫn /assets/logo.png(cộng với một hàm băm trong quá trình sản xuất). Tuy nhiên, nếu Rails không thể tìm thấy hình ảnh mà bạn đã đặt tên, nó sẽ rơi trở lại /images/logo.png.

Câu hỏi tiếp theo là: tại sao Rails không tìm thấy hình ảnh của bạn? Nếu bạn đặt nó trong app / asset / images / logo.png, thì bạn sẽ có thể truy cập nó bằng cách truy cập http://localhost:3000/assets/logo.png.

Nếu cách đó hoạt động, nhưng CSS của bạn không cập nhật, bạn có thể cần phải xóa bộ nhớ cache. Xóa tmp/cache/assetskhỏi thư mục dự án của bạn và khởi động lại máy chủ (webrick, v.v.).

Nếu không thành công, bạn cũng có thể thử chỉ sử dụng background-image: url(logo.png);Điều đó sẽ khiến CSS của bạn tìm kiếm các tệp có cùng đường dẫn tương đối (trong trường hợp này là / asset).

— Nick Urban
nguồn

2

Chỉ để nhảy vào điều này, tôi đã bị cắn khi sử dụng dấu ngoặc kép trên đường dẫn hình ảnh thay vì dấu ngoặc kép đơn. Bạn sử dụng nhiều dấu ngoặc kép với trình trợ giúp nội dung trong tệp css / scss.

— d_ethier

tôi đang nhận được "biến cục bộ không xác định hoặc phương thức` hình ảnh '"

— Muhammad Umer

Có thể bạn vô tình đặt một khoảng trắng trước hình ảnh từ?

— Nick Urban

10

Tôi chỉ phát hiện ra rằng bằng cách sử dụng asset_urltrợ giúp bạn giải quyết vấn đề đó.

asset_url("backgrounds/pattern.png", image)

— Leftis
nguồn

Tôi có undefined local variable or method 'image'lỗi.

— Penguin

Có thể một cái gì đó đã thay đổi trên đường ray, câu trả lời này là cũ! Bạn có thể thửasset_path("<your_path>", type: :image)

— Leftis

8

Tôi gặp sự cố tương tự, cố gắng thêm hình nền bằng css nội tuyến. Không cần chỉ định thư mục hình ảnh do cách đồng bộ hóa nội dung hoạt động.

Điều này đã làm việc cho tôi:

background-image: url('/assets/image.jpg');

— ykwx
nguồn

Cảm ơn, tôi đã làm assets/img.jpghoặc ../assets/img.jpgmà rõ ràng là không hoạt động trong bất kỳ thư mục nào. /assets/img.jpglàm. TY

— ElliotM

5

Rails 4.0.0 sẽ trông hình ảnh được xác định bằng image-url cùng cấu trúc thư mục với tệp css của bạn.

Ví dụ: nếu css của bạn assets/stylesheets/main.css.scss, image-url('logo.png')trở thànhurl(/assets/logo.png) .

Nếu bạn di chuyển tệp css của mình sang assets/stylesheets/cpanel/main.css.scss, image-url('logo.png')trở thành/assets/cpanel/logo.png .

Nếu bạn muốn sử dụng hình ảnh trực tiếp trong thư mục nội dung / hình ảnh, bạn có thể sử dụng asset-url('logo.png')

— kuntoaji
nguồn

5

cho các bảng định kiểu: url (asset_path ('image.jpg'))

— người dùng2586863
nguồn

3

Sự khác biệt chính giữa là gì url(asset_path('image.jpg'), url('image.jpg')và image-url('image.jpg')? Tôi đang làm việc với Rails 5.0.0.1 và url()hoạt động tốt trong các tệp SCSS và trongcác tệp html.erb mà tôi sử dụngasset_path()vì vậy tôi muốn biết cách thực hiện chính xác. Cảm ơn trước.

— alexventuraio

asset_paththêm vào tệp hình ảnh một phụ lục thông báo. Nó thực sự dành cho sản xuất, sau mỗi lần triển khai, phụ lục thông báo sẽ được thay đổi và trình duyệt của người dùng sẽ tải xuống phiên bản hình ảnh mới.

— Alex Kojin