Rails 4 Javascript: Haben Sie Probleme mit Bildpfaden

Question

Ich versuche, das Hintergrundbild zu erhalten alle 6 Sekunden zu ändern, und es ist immer ein Fehler 404:

Zum Beispiel erscheinen die unten in der JS-Konsole

http://localhost:3000/app/assets/images/ggb_mist.png 404 (Not Found) 

Um dies zu vereinfachen, habe ich gerade einen background-color versucht, um sicherzustellen, dass es funktioniert. Siehe unten:

$(document).ready(function() { 
    function testing() { 
    $('.holder').css('background-color', 'red'); 
    }; 
}); 

Das obige funktioniert. . Wenn ich jetzt versuchen, das gleiche mit einem Bild zu tun (was in app/assets/images/imagefilenamehere.png befindet ich immer einen Fehler 404 erhalte Ich habe versucht:

filenamehere.png 
../assets/images/filenamehere.png 
../app/assets/images/filenamehere.png 
../images/filenamehere.png 

Warum wird nicht die folgende Arbeit

$('.holder').css({'backgroundImage':'../assets/images/filenamehere.png'}); 

?

Jede Eingabe über die Angelegenheit wird geschätzt

Answer 1

Das ist mein Problem gelöst: Section 2.3.1 of guides.rubyonrails.org/asset_pipeline.html

$('.holder').css("background-image","url(<%= asset_path('tree-rays.jpg') %>)"); 

Beachten Sie, dass tree-rays.jpg ist in app/assets/images (Rails 4 Application) .

Answer 2

Sie die .erb (embedded Rubin) Erweiterung verwenden können Schienen Pfad Helfer in Ihrer .js Dateien zu ermöglichen.

1) Sie speichern Ihre ursprüngliche Datei (my_script.js) als my_script.js.erb mit dem Bildpfad Helfer:

$('.holder').css({"background-image":"<%= asset_path('filenamehere.png') %>"}); 

Also, stellen Sie sicher, dass Sie Ihre Asset-Pipeline richtig eingerichtet haben:

von den Schienen Asset-Pipeline Führung (http://guides.rubyonrails.org/asset_pipeline.html)

2) Ihre JavaScript-Datei (my_script.js.erb) ist innen:

app/assets/javascripts/ 
lib/assets/javascripts/ 
vendor/assets/javascripts/ 
vendor/assets/somepackage/ 

3) Ihre Datei in dem Manifest verwiesen wird (vielleicht app/assets/javascripts/application.js):

//= require my_script