Läuft Fläschchen lokal. Ich möchte, um Bilder anzuzeigen, basierend auf Namen generiert, die in JavaScript
Ich bin mit d3 und Fläschchen zur Anzeige von Baum-Diagrammen im browser. Die ganze Sache ist gespeichert und wird betrieben vor Ort.
Ich möchte die Anzeige eines entsprechenden Bildes, wenn der Benutzer mit der Maus über die einzelnen Knoten in der Baum-Diagramm.
Für die JSON-Daten, dass der Baum-Diagramm beruht auf, ich bin mit url_for und meine statische Ordner, wie diese:
d3.json("{{ url_for('static', filename=json_data) }}", function(error, flare) {
// Lots of codeDie gleiche Sache, für die einschließlich der d3:
<script src="{{ url_for('static', filename='d3.js') }}"></script>Jedoch, wenn es um die Bilder, die ich will erscheinen, schweben, ich bin mit den Daten aus dem JSON zu erstellen, die den Namen des Bildes. Da dies bedeutet, dass mithilfe von JavaScript-Variablen, anstatt python diejenigen, die ich nicht sehen kann, wie die Anzeige es mit url_for.
Als alternative habe ich versucht, mit einer Reihe von verschiedenen absoluten und relativen Pfaden, aber hat nichts geklappt. Ich lese etwas über Firefox nicht wollen, um anzeigen lokaler Dateien, aber sicherlich nicht für Dinge ausführen von meinem computer? Ich kann die Anzeige eine Reihe von lokalen Dateien in meinem browser in der Regel. So oder so, habe ich installiert ein add-on namens LocalLink. Dies ist der code, den ich versuchte zu verwenden, die mit dieser Methode:
var img_path;
d3.selectAll( ".node" ).on( "mouseover", function(d) {
img_path = "{{ image_path }}" + d.name + ".png";
document.getElementById('thumb').src=img_path;
document.getElementById('thumb').style.display='block';Hier die python-abbildpfad variable ist etwas entlang der Linien von r"file:///C:/Python27/my/app/Ordner/etc/"
Diese fast funktioniert. Die Bilder erscheinen nicht auf zu schweben, aber wenn ich mit Firebug und bewegen Sie den Mauszeiger über das entsprechende tag in HTML, das richtige Bild zeigen, nicht als thumbnail neben meinem cursor.
Ich habe versucht, erstellen Sie eine einfache HTML-Seite mit einem Bild bezieht sich auf einen "Datei:///....." Lage. Das funktioniert. Das macht mich denken, dass es ist die Flasche, das ist das problem mit dieser Methode. Es scheint nicht, ein problem zu haben mit absoluten Pfaden für web-Standorte (habe ich getestet, und es funktioniert), so dass ich vermute, dass die Kolben nicht wie die absoluten Pfade zu den lokalen Speicherorten.
So, es gibt mehrere Möglichkeiten, wie könnte dies lösbar sein:
- Es ist ein Weg, um url_for mit Variablen erzeugt im JavaScript.
- Es gibt einen Weg, um Informationen zurück, um eine python-variable, und verwenden Sie, dass in url_for.
- Es gibt einen Weg, um Fläschchen zu, zeigen die Bilder mit dem "file:///....." format.
Gibt es andere Möglichkeiten?
Die einzige andere Möglichkeit ich habe darüber nachgedacht, bewegt sich das ganze online. Allerdings bin ich nicht sehr vertraut mit Python hosting, und diese Anwendung verwendet werden Verdreht und PyQT. Ich habe keine Ahnung, wie ich gehen würde, über Sie zu installieren, die auf einem server. Ich weiß gar nicht, ob das, was ich aufgebaut habe würde arbeiten online, können Sie verwenden Sie Verdrillte oder PyQT auf einer live-website? Ich habe nur ein vages Gefühl dafür, was Verdreht auch tut.
Wenn die Leute denken, das ist meine beste/einzige option ist, werde ich eine detaillierte Erklärung, wie mein Programm funktioniert, aber bis zu diesem Punkt werde ich nicht Durcheinander Dinge.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich nehme an, Sie eine Flask Anwendung, die lokal (in Ihrem browser, Sie schreiben so etwas wie
localhost:8000).Erste, Sie brauchen, um zu verstehen, was
url_fortut. Es hilft Ihnen, zu generieren, die URL, die die statische Datei (in deinem Fall, ein Bild oder ein javascript-Quellcode-Datei), dass die HTML benötigt, um zu laden. Also, wenn Sie haben......die Template-engine-tatsächlich wandelt diese um...
Wenn Sie wollten, könnten Sie gerade eingegeben haben, die oben in Ihre Vorlage (aber mit url_for ist hilfreich, wenn Sie den Pfad ändern müssen, um so etwas wie /media statt /static: jetzt müssen Sie nur ändern Sie es in einem Ort, anstatt ändern Sie ALLE Ihre links).
Also, was dies bedeutet ist, dass, wenn Sie ausführen, Kolben, und laden Sie die Seite mit den oben genannten HTML -, weiß der browser zu finden d3.js Skript "localhost:8000/static/d3.js". Der browser sendet eine Anfrage an den server (deine Kolben app) und Fläschchen erkennt, dass es gesucht wird eine statische Datei (weil der Pfad beginnt mit
/static) und gibt die d3.js Datei gespeichert, in derstatic- Verzeichnis in Ihrem Projekt.Nun, sagen wir, Sie haben eine Datei in Ihrem
/staticVerzeichnis namensstatic/images/img1.png. Um diese, würden Sie brauchen, generieren die URL, die sich beziehen auf diesem Bild (das wäre/static/images/img1.png). In Kolben, die Sie in der Regel Typ:...das würde übersetzen...
Wenn Sie es wollten, Sie könnten nur geben Sie diese URL. Also, Ihr javascript könnte generieren Sie einfach diese URL und es würde funktionieren.
Nun, das wussten Sie vielleicht schon, aber was nervt Euch ist, warum Sie nicht können, dann tun Sie etwas, das wie
file:///C:/Python27/my/app/folders/etc/. Erste, Sie sagen, die Flasche ist nicht der Umgang mit diesem Antrag, wie Sie es erwarten. Nun, das ist, weil die Kolben nicht die Bearbeitung dieser Anfrage an alle! Denken Sie daran, dass die Kolben laufen auf so etwas wielocalhost:8000. Wenn Sie<img src="file:///C:/Python27/my/app/folders/etc"></img>, dann wird der browser ist nicht das senden einer Anforderung zum abrufen dieser Dateilocalhost:8000es versucht, die Datei abzurufen, lokal mit dem browser. Ebenso, wenn Sie einen link auf Ihrer Seite fürgoogle.comIhr browser ist nicht dabei, senden Sie dem Benutzer, die geklickt haben den link zu deiner Flasche-app, schicken Sie Sie zu Google!Aus Gründen der Sicherheit, wenn Sie eine Verbindung zu einer Website, die nicht einer lokalen Website (z.B.
example.com/index.htmleher alsfile:///home/mark/index.html), wird Firefox nicht zulassen, dass Sie Zugriff auf Dateien direkt von der Festplatte. Dies macht Sinn, da sonst gehen example.com könnte die Website laden Sie eine beliebige Datei auf Ihrer Festplatte in der web-Seite, die javascript würde Zugriff haben, dann senden Sie die Informationen von der Datei zurück auf die Website!Es ist einfach so passiert, dass
localhost:8000als nicht-lokalen site auf die Browser. So, Firefox wird nicht zulassen, dass Sie Zugriff auf diesefile:///...Ressourcen in die Seite.So, das ist kein problem mit Kolben: das ist ein problem mit einem browser zu tun, Dinge, die ein browser nicht wollen, zu tun.
Nun, was genau Ihre Lösung ist hängt von den Anforderungen Ihrer Anwendung. Die offensichtlichste Lösung wäre, es so zu machen, dass die Bilder, die Sie anzeigen möchten, liegen innerhalb der
/static- Verzeichnis des Projekts.Jedoch, wenn Sie möchten, erstellen Sie eine Flask-Projekt, Dinge zu tun mit Dateien, die sich irgendwo auf Ihrer Festplatte abgelegt wird (ohne zuerst ein "upload" - Seite, wählen Sie die Datei aus), könnte es sein, Kommissionierung die falsche tool (eine web-basierte Anwendung) für den job.