CSS und JQuery: Leerzeichen innerhalb des Bildnamens break code von url()

Question

Ich habe eine Seite, die eine größere Version eines Bildes anzeigen soll, wenn es über einem Thumbnail angezeigt wird.

Ich habe einen ‚div‘ mit einer ID und dem JQuery-Code ist wie folgt:

$(document).ready(function(){ 

    $('img').hover(function() { 

    var src = $("#im" + this.id).attr("src"); 
    $('#viewlarge').css('backgroundImage','url(' + src +')'); 
    return false; 
    }); 

}); 

Die Bilder, die ich verwende, werden durch eine Ruby-Skript erzeugt, dass „erzeugen“ ein Bild mit einem ähnlichen, noch andere ID. Manchmal werden jedoch Fotos hochgeladen, die "Leerzeichen" enthalten. Meine Entwicklerwerkzeuge sagen mir, dass das Hintergrundbild nicht korrekt eingestellt ist, der Bildpfad jedoch korrekt ist und der Browser keine Probleme hat, das Bild zu finden.

Meine Frage ist, kann ich irgendwie die URL 'src' bereinigen, so dass Leerzeichen kein Problem sein werden? Ich bin mir bewusst, dass ich diese Server-Seite mache, aber ich würde gerne wissen, wie man das auch mit JQuery/JS macht.

Danke!

Answer 1

Leerzeichen sind in einem URI nicht gültig. Sie müssen in codiert werden.

Sie könnten src.replace(/ /g, '%20') oder allgemeiner encodeURI(src) bis % -encodieren Sie alle Zeichen, die in einem URI nicht gültig sind. encodeURIComponent(src) ist häufiger, aber es würde nur funktionieren, wenn der src nur ein einzelner relativer Dateiname wäre; Andernfalls würde es / codieren und Pfade funktionieren.

Allerdings ist das echte Problem ist, dass das Original img src ist bereits gebrochen und funktioniert nur dank Browser-Korrekturen beheben Ihren Fehler. Sie müssen das Ruby-Skript reparieren, das die Seite generiert. Sie sollten den Dateinamen vor der Aufnahme in den Pfad URL-codieren; Es gibt viel mehr Zeichen, die Ihnen Probleme als nur Platz verursachen können.

Wie Pekka sagte, sollten Sie auch Anführungszeichen um die URL im url(...) Wert verwenden. Während Sie ohne sie für viele URLs wegkommen können, müssten einige Zeichen \ -escaped sein. Mit doppelten Anführungszeichen können Sie das vermeiden (in einer URL selbst können keine doppelten Anführungszeichen vorkommen).

Answer 2

Verwenden Javascript encode Funktion Ihre 'src'

Z. B. zu kodieren

$('#viewlarge').css('backgroundImage','url(' + encode(src) +')'); 

Ich glaube, Sie auch 'escape' Funktion Javascript verwenden können, als auch

$('#viewlarge').css('backgroundImage','url(' + escape(src) +')'); 

Answer 3

Hinzufügen von Anführungszeichen um die URL helfen sollte:

$('#viewlarge').css('backgroundImage','url("' + src +'")'); 

jedoch nach dem W3C specs, weiß Leerzeichen müssen maskiert werden, daher ist die URL-Codierungslösung, die von @Andy Es Kopf @bobince bereitgestellt wird, die sicherste Lösung.

Answer 4

• Erstens, warum lassen Sie Kunden den Namen Ihrer Bilder bestimmen?
• Zweitens, warum sterilisieren Sie sie nicht?
• Drittens, ich vermute, dass Sie nicht sind urlencoding die Urls, wenn man sie auf den HTML-Code schreiben

Answer 5

(die einen Raum in eine% 20 drehen würde) würde ich nicht Bilder mit Leerzeichen im Dateinamen erlauben, hochgeladen werden - scheint mir keine gute Übung zu sein.

Answer 6

Ich weiß, dass Sie bereits Ihre Antwort ausgewählt haben, aber ich möchte Pekkas Lösung verbessern und die praktikabelste Lösung anbieten, da ich ein anderes Problem hatte, während es einen Dateinamen mit Klammern behandelt.

$("#viewlarge").css("background",'url(' + "'" + url+ "'" + ')'); 

Ich hoffe, es hilft!