Intégrer une image à une page HTML

Sans avoir des fichiers images "à côté"

Le problème exposé dans ce sujet a été résolu.

J'ai trouvé cette méthode, mais ça me semble bien compliqué pour ce que je veux faire.

Nicox11

Non, définitivement. Si pour toi taper une ligne dans un terminal ou rechercher un outil en ligne est compliqué, merci de cesser la programmation, c'est juste un élément de base de l'apprentissage en autodidacte, un peu comme si tu voulais faire de la mécanique mais que tu trouvais "trop compliqué" de monter une chaîne de transmission, tu finira forcément par te planter.

J'ai trouvé cette méthode, mais ça me semble bien compliqué pour ce que je veux faire.

Nicox11

Cette méthode ne présente que l'utilisation dans un CSS, mais les data-uri sont disponibles partout où tu peux référencer une image.

Suite à cela, j'ai essayé de coder un petit script python qui génère une page html avec une image incrustée :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
def generateHTML():
   codeHTML = '<html>\n\t<body>\n'

   with open("bandwidth.png", "rb") as image:
      encodedImage = base64.b64encode(image.read())
   codeHTML += '<p><img src="data:image/png;base64,' + str(encodedImage) + '">'
   codeHTML += '</p>'
   codeHTML += '\t</body>\n</html>'

   fichierHTML = open("test.html", "w")
   fichierHTML.write(codeHTML)

Lorsque j'ouvre le fichier HTML, l'image ne s'affiche pas ("icone image cassée"). Je ne vois pas ce que j'ai fait de mauvais. D'après Titi_Alone c'est très simple, j'ai du louper une étape élémentaire.

Merci d'avance :)

+0 -0

Voilà, attention c'est assez long :

1
src="data:image/png;base64,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'"

Merci :)

+0 -0

Je peux te dire ce qui ne va pas du coup : c'est l'apostrophe à la fin du src, tout fonctionne en la retirant, mais pas quand elle est présente, il doit y avoir un problème dans le code Python, mais je n'arrive pas à voir où, je n'ai jamais fait de Python, il faut dire ; j'espère toutefois qu'un autre membre plus qualifié dans ce domaine pourra t'éclairer.

Il semblerait que la conversion base64 -> string ajoute b' en début et ' en fin de chaine. J'ai donc simplement supprimé les deux premiers caractères et le dernier caractère afin de résoudre mon problème.

Nicox11

Ce n'est pas la bonne manière de procéder. Il faut plutôt passer par la méthode decode de l'objet bytes pour obtenir une str.

Il semblerait que la conversion base64 -> string ajoute b' en début et ' en fin de chaine. J'ai donc simplement supprimé les deux premiers caractères et le dernier caractère afin de résoudre mon problème.

Nicox11

Ce n'est pas la bonne manière de procéder. Il faut plutôt passer par la méthode decode de l'objet bytes pour obtenir une str.

entwanne

J'ai modifié, ça marche impec'. Merci :)

Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte