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.
Bonjour,
Je voudrais savoir si il était possible d'intégrer une image à une page HTML. C'est à dire plutôt que d'avoir les fichiers page.html et image.png, avoir simplement page.html avec l'image "incrustée" dedans ?
J'ai trouvé cette méthode , mais ça me semble bien compliqué pour ce que je veux faire.
Merci
Pour la plupart des formats d’image, c’est à ma connaissance la seule solution. Seule exception (que je sache) à cela : le SVG , qui a cependant certaines limites.
Idem, pas d'autres solutions a part le SVG. Mais bon avec n'importe quel langage digne de ce nom, l'encodage base64 c'est 2 lignes.
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.
Pas besoin de monter sur tes grands chevaux. Je demandais juste si il existait un moyen plus simple.
Je vais donc partir sur cette solution. Je vous remercie
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 :
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
Pourrais-tu coller le src de l'image généré ici ?
Voilà, attention c'est assez long :
src="data:image/png;base64,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'"
Merci
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.
Bien vu ! Je ne sais pas comment elle apparaît. Je vais essayer de me pencher sur le problème.
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.
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