wobei myDict die Daten meiner Tabelle enthält.
Ein element davon ist ein Link zu einem Bild. Dieses Bild habe ich auch schon lokal runtergeladen. Jeder Link/Bild hat auch eine eindeutige ID, womit ich jedes Bild genau dem entsprechendem Element hinterlegen kann.
Aber wie bekomme ich es hin, dass mir das Bild angzeigt wird?
Momentan wird einfach nur der Hyperlink (wo ich es rungergeladen habe) angezeigt.
Ich sehe nicht wo der Inhalt dieser Variable ausgegeben wird.
Brauchst du Hilfe zu HTML oder zu Python?
Was steht denn in deiner dict drin und wie soll das generierte HTML Dokument konkret aussehen? Und was willst du "mit Bild ersetzen"? Woas hat das <input> Element mit deiner Frage zu tun?
Momentan wird einfach nur der Hyperlink (wo ich es rungergeladen habe) angezeigt.
Du musst data entsprechend vorbereiten, oder den generierten HTML Code nachträglich ändern, oder to_html() durch eine eigene Methode ersetzen, die das erledigt.
Ich habe eine neue Funktion hinzugefügt, welche mir die Bilder im Nachhinein ersetzen soll. Dazu möchte ich in der HTML einfach die entsprechenden Stellen anpassen. Anstelle des Links steht schon nur die ID dort. Die Bilder haben die selbe ID
with open(html_file, "w", encoding='utf-8') as file:
15
file.write(str(soup))
16
file.close()
Das Problem ist, dass das "<" und ">" zeichen nicht richtig aufgelöst werden. In der HTML steht dann "<" bzw. ">" .
Wenn ich die html öffne, steht dort schon "<" bzw. ">", aber die Bilder werden nicht angezeigt.(siehe anhang)
Wenn ich es händisch ersetze, werden die Bilder angezeigt
Jetzt hast du dir das Leben durch Einsatz einer weiteren Bibliothek (die du nicht kennst) schwer gemacht.
Offenbar ersetzt die Bibliothek Sonderzeichen wie < und > in Strings durch ihre Escape Sequenzen. Du musst also die Strings der Zellen durch Tags ersetzen. Vermutlich ungefähr so:
1
from bs4 import BeautifulSoup
2
html = "<html><body><table><tbody><tr><td>A</td><td>http://path/to/image</tr></tbody></table></body></html>"
Wie Sherlock sagt, würde das auch direkt beim Erstellen lösen. In beiden Fällen/Libraries muss man sich mit dem "Escapen" der HTML-Zeichen beschäftigen.
So müsste es deinen Anforderungen genügen:
1
import html # Python standard library ab Python >=3.2
2
import pandas as pd
3
4
myDict = {'title': ['Monkey', 'Banana on Sale <<SALE>>'],
Bei Pandas kann man das mit "to_html(..., escape=False)" umgehen. Leider geht das nicht pro Spalte, daher würde ich die normalen Textspalten nochmal manuell escapen, sonst kann es zu komischen Seiteneffekten kommen.
Anstatt über einen (externen) Link <img src=yxz.com ... > kann man die Bilddaten auch als Base64-codierten Text direkt in die HTML-Datei einbetten.
Guckst du hier:
ich habe in Python eine HTML aus einer liste von dicts erstellt.
1
> data = pandas.DataFrame(myDict)
2
> with open(html_file, "w") as file:
3
> # [...]
4
> file.close()
5
>
Der ganze Trick an einem Context Manager ("with") ist, daß er seine lokalen Ressourcen vollautomatisch freigibt (hier: Deine Datei automatisch schließt), sobald sein Kontext (Scope) verlassen wird. Das "file.close()" ist deswegen überflüssig, wenn Du die Datei in einem "with"-Kontext öffnest.
Aber wie bekomme ich es hin, dass mir das Bild angzeigt wird?
Momentan wird einfach nur der Hyperlink (wo ich es rungergeladen habe)
angezeigt.
Dann ersetz' Deinen Bild-URL durch entsprechenden HTML-Code:
Zusätzlich möchte ich anmerken, daß es für Python ein paar leistungsfähige Template-Engines gibt. Besonders beliebt ist Jinja2 [1], das zum Beispiel im Flask-Projekt [2] verwendet wird und dem Templating von Django [2] ähnelt. So eine Template-Engine hat Platzhalter, die dann beim Rendern mit den Inhalten (Werten) Deiner übergebenen Variablen befüllt werden.
Ein Jinja2-Template "tabelle.html" könnte also zum Beispiel so aussehen:
1
<!doctype html>
2
<htmllang="de">
3
<head>
4
<title>Sonderangebote</title>
5
</head>
6
<body>
7
<h1>Guckstu:</h1>
8
{{ pandas_tabelle | safe }}
9
</body>
10
</html>
Dein Dataframe würde dann als Variable "pandas_tabelle" übergeben, und die Template Engine würde Deinen df.to_html() dann dort ausgeben. Der Filter auf "| safe" würde Jinja2 sagen, daß Du sicheren HTML-Code angibst, < und > also nicht durch < und > ersetzt werden sollen -- ein Sicherheitsfeature. So eine Template-Engine ermöglicht es Dir Deine Codes sauber zu trennen, was der Übersichtlichkeit und der Separation of Concerns [6] hilft.
Wenn Du Fragen dazu hast, von denen Du denkst, daß sie für die Allgemeinheit des Forums eher nicht so interessant sind, helfe ich auch gerne per PM. Viel Spaß und Erfolg bei Deinem Projekt! :-)
Anstatt über einen (externen) Link <img src=yxz.com ... > kann man die
Bilddaten auch als Base64-codierten Text direkt in die HTML-Datei
einbetten.
Das hatte Ernst schon vorgeschlagen... Ich habe dabei über tradierte
Bräuche wie Streckbank und Hexenverbrennung nachgedacht. :-/
Ernsthaft: Warum? Bitte mal argumentieren
Wenn man auf diese Weise z.B. Exporte von Oszilloskopen oder sonstiger Analyse-Software macht, hat man tatsächlich alles in einer einzigen Datei und es genügt ein HTTP-Stream bzw. File. Oder in nicht sehr potenter Server-Umgebung wie Mikrocontroller als Webserver.
Für Fullscreen- bzw. HighEnd-Fototapete hatte ich es ja bereits eingeschränkt.
Mit Transfer-Encoding: gzip sogar weniger.
Allerdings hat der Webbrowser dann weniger Möglichkeit zum Cachen.
Der TE will wohl eine statische HTML-Datei auf die Festplatte schreiben, von einem Webserver war (seitens TE) nie die Rede, da macht das wenig Unterschied.
Muss er wissen, ob für seine Anwendung eine All-in-One HTML-Datei oder eine Datei mit einem Ordner Bilder nebenan oder eine Nicht-Offlinefähige Datei mit Bild-Verweisen zu den Ursprungswebservern besser passt.
