Intégrer une image à une page HTML

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

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

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 :)

+0 -0

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.

« There was a kingdom that was falling so fast that people wouldn't help it, they wouldn't make it last » - Animal Kingdom, Beau

+0 -8

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.

Édité par entwanne

Auteur du sujet

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 :)

Édité par Nicox11

+0 -0
Auteur du sujet

Voilà, attention c'est assez long :

1
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfEAAACtCAIAAAAva9ESAAAABmJLR0QA/wD/AP+gvaeTAAAZ8ElEQVR4nO3dfVBTV/oH8BNAXZBgeUlpCIKAqQppFClF3bYBpJapYHcF3c6269bOOkVb1pbNUqwUDBYEq3SoxqWzle1Op2xnZe1QZUXqtEC3wlhckBUwVBcESYgQRMKLvOnvj7vNL5PcBAl5ITffzzjPJDcPNyf+8XA45+QcVmNjIwEAAPs3NDTkYus2AACAGQwODnZ0dPyvpi9fvty2rQEAgLk4deoUIcTJ1s0AAACzQU0HAGAO1HQAAObAHCkAgH2orKzUuRIfH69zBf10mKfYbLatmwAwv8THx8fHx8fExBC6ak5BPx0AwG6MjY21tLQ4OzsPDg66uNAUcPTTYa7YP/H29g4LC0tLSxsYGLB1o+Yd/NkBc9fR0XHx4kV3d/fw8PCGhobAwED9HNR0MAO1Wq1Wq5VKZVVVlYeHx2uvvWbrFgEw0MDAwPr161euXOnj4xMXF8fn8/VzUNPBbFxcXHg8XlpaWl1dHXXl73//+5o1a3x8fDZv3tzV1UVdZLPZ5eXl4eHhHA7n2WefbW5upq7fu3dPLBYHBwcvW7bs2LFjmttOT09/8MEHAoHA39//9ddfHxkZMd4MNpt9/PjxZcuWBQcH//GPfxwfH9e8RNueK1eubN26NTAw0Nvb+9lnny0vLzd+fbafi/ojhmj9QWPa5wLo6+urra2t1KKfg5oOZjM1NdXd3f3++++Hh4dTV7766quysrKurq7Y2Ni9e/dqMsvKysrLy2/evPnCCy+kpaVRFwsKCrq7u+vq6urq6mprazXJUqm0trb2n//859WrV52dnQ8ePDhjS7777rv6+vq6urqurq6jR49qrtO259e//vVLL73U2tra09NTUFBQWlpq/PpsPxf1R4zmAfXYtM8FDu5h5khZ1B5e2BsATKYzUszj8c6dOxcUFKR9cXR0NCgoSKlUUvnXrl3j8Xg61wUCQXl5eUhICCHkxx9/XLt2LVX+1q5d+49//IO6YV9fn0gkam1tNd6epqYm6j43btzYunXrlStXdHJ03nf79u0bN24MCQl59NFHnZz+19ExdH22n0vTKk01p8z2cwGQn+ZI79y5ExkZ2dDQEBcXp3kJewOA2VDdzzt37rS0tCQmJorFYkJIU1PTli1bli5dymazfX19R0dHNflU4SOEuLm5aa4rlUp/f3/q8dKlSzXJt27dEgqF1KhFcHBwT0/PjO3R3Mff31+hUFCPDbXn9OnTSqUyPT1dKBSGhIScPn3a+PXZfi5DTPhc4OAwRwpW5eLiEhAQ8N577/3rX/8ihOzYsSM5Ofnq1atqtbq7u3vGH3/sscdu3bpFPdY8IIQEBAR0d3drBi7u3r0746207+Pr60s9NtSexx9/XCqVfv/993K5/PDhw5oxE0PXZ/u5KCwW68GDB9pXTPhc4OAwRwpWNT093dvbW1RUJBAICCFjY2McDsfV1bWrq0tTEI3Ytm1bZmbm7du3e3t79+/fr7m+c+fOPXv2dHR0jI+PX7p0afv27TPeKjMzU6lU3r59OzMzc9u2bdRFQ+158cUXq6qqRkZGJiYmRkdHPT09jV+f7eei+Pn5nT9/fnp6ei6fCxwc5kjBSqgBBGq9x82bNz/99FNCSHFxcXZ2NpfL3bx58+bNm2e8SXp6Oo/HW7duXVRU1NNPP625vnv37p///OfJycn+/v5/+MMfXnnllRlvtW7dusjIyKioKD8/v/T0dOqiofa88cYbH374YWBg4MqVK8+cOfP5558bvz7bz0U5ePDg22+/7eXlpZl+MOFzgYNjsVibNm2iZko3bdrEYrFocjBHCgyjPxsJwAz19fVcLtff3//Bgwc9PT29vb1RUVGaV6k5UuwNAABgHwQCQVtbW3t7OyHkkUceoQY5daCmAwDYB3d398jISM3TyspK7MsIzIeBF3Bk6KcDANgH2oUuOlDTAQDsg85IC9YyAgAwHGo6AIBdot3GiyFjLx3ffcdisZZpfVEFAIBhVCpVe3v78PAwIcTd3X3FihVeXl46OUyo6ZNjYxckEpaz86tffeWyaJGtmwMAYBHNzc1hYWE+Pj6EkL6+vitXrlD77mpjwtjLDyUlQwrF3Vu3fjh50tZtAQCwJbvvp9/p7Lz0ySfU40snT4Zu2bLkp31WAQCYRCgUymSypqYmQoi7u7tQKNTPsfuaXn348PTEBPV46t69bw4d+qVUatsmAQBYgre394YNG4zn2H1N/+WJE4SQ9PT0w4cP27otAAAW5ChzpISQ+/fv27oJAACW5RBzpBMTE93d3Xfv3nV3d+/r60NERESc51Eul3d3d/f29lqiJDJk//Ts7Gzt4+EBAOYzavxktlQqlUwm0x578fb21rzKqP3TR0ZGbN0EAADLcog5UsrixYtt3QQAAMvS37RLf3sAhtR09NMBwBHQ7vGize7nSCnopwMAEAbUdGrdCzWD3NHR4RDRy6tDICAslqNELy/b/58jIpovtre3Y93LDBxr3QuLRR48sHUjrMjLi9y5Y+tGWJGnJxkYsHUjwLJMW/diHLXuxbL99MrKyoiICB8fn4iIiPPnz9PmKBSKhIQELpebmJioVCppcyYnJyUSSWhoKI/HKyoq0k/AeDqTDQyQBw8c6J9D/QIjhHh5ERbLgf6tWmXR/07L1vTdu3cXFBT09PQcOnQoJSWFNicrK4vamEYgEGRnZ9PmFBYWNjc3V1VVtbS00NZ9jKcD2Ks7d2z/e9Sa/9raLPrfadl1L1wu18nJicViOTs783g82pzq6uqamhoPD4/U1FT977lSSktLy8rK/P39CSF5eXn6CeinAwAQS/fTjx079tvf/tbb2/vVV1/96KOPaHMGBgY4HE5ycjKHw+nv76fNkcvlAQEBhBA2m81ms7Vfmlap1CUlrpOTw9XVhBCHiP7+tm8DouXiihWExRpeutRRYliY7f/PrRun+vvVJSWTlumwW3aOdO3atfn5+SKRqLq6ev/+/Q0NDfo5fD6/traWy+XK5fKYmBiZTKafIxAIKioqAgMDCSFsNlutVuskiMXi4uJiS3yE+cjR5kgBGMeEOdK6urrAwEAul8tisWgTrDFHqlKpCCHU2IuhPrhIJJJKpWq1WiqVRkdH0+YkJSVJJBKVSmVo9Q/G0wGA2UJDQ/v6+mpqaq5fvz4+Pm4ozbLj6cePH3/nnXe6uroCAgJOnDhBXdTpaOfk5OzatYvP50dERHzy04lFOjIyMjIzMyMjIxcsWJCbm6ufgPF0AGC2JUuWrF69enx8vLu7u66uztPTc9myZUuWLNFJw/p0O4SxFwA7N8f16ffv3+/t7b158+b69es1F7EvIwCAXXJycvLz8/Pz86N5yfqtMS9qbwBqdGk+fOsXERER0XjE3gAzw7oXALAjltsbgCFjL4sXLyYG1vcwkK+vrVsAAPMUQ2r6yMgIuq4AAHY/nk7B+nQAAMKAmu6I+6cjIiLaczTXHKn+UXaEMXOkjrU+HQDsnFnmSCsrK7WPsmPUHCnWpwMA49F2zHUwpKZjPB0AGE/ngGnaEm/34+kU9NMBAAhjajr66QDgaHS67RS7r+lY94KIiGhf0eR1LyqVqq6u7uuvv/7666/r6uoG6M4ix7oXAABrM23dy7fffhsWFubj40MI6evra21t1T7vc4YzMagj4kZHRzdu3BgUFFRVVWVCCyYmJnJycgQCgYeHh86ZcxoKhSIhIYHL5SYmJtKeH00ImZyclEgkoaGhPB6vqKhIPwHj6QAAZMaxl4qKikWLFv31r389cOCACXc/cuTImTNnPv/888HBQf0D5yhZWVlCoVAmkwkEguzsbNqcwsLC5ubmqqqqlpYW2rqP8XQAYDyhUHj9+vULFy5cuHDhxo0bQqFQP8fgWsZFixZNT09fvnw5NjZ2w4YN7e3tJrTgiy+++PDDD1evXm0kp7q6uqamxsPDIzU1VfvvCG2lpaVlZWX+/v6EkLy8PP0E9NMBgPG8vb03bNhgPMdgPz0kJOTy5cvV1dXh4eEuLi5Gjr8zQi6XX7hwwdfX94knnjh37hxtzsDAAIfDSU5O5nA4hs4slcvlAQEBhBA2m60zhjOtUqlLSlwnJ21+FjgiIiLiw8Sp/n51SclkWxuZpUo9+jkG50jPnj37xhtvCIXCL7/80sXFRecQ0Ye0fPlyqVQaExPz/fff79q16/r16/o5fD6/traWy+XK5fKYmBiZTKafIxAIKioqAgMDid5xphTH2j8dAOycaXOk1GYAmi0BaPcGMNhPT0hIuHnz5pkzZ1xcXAghJhR0QsjTTz+tecwysL+5SCSSSqVqtVoqlUZHR9PmJCUlSSQSlUplaPUPxtMBgPGcnZ2HhoZYLNbQ0NDw8PDChQv1cyy7Pv3gwYNFRUVLly59++23jx8/Tl3UGTzJyclpbGzk8/lNTU2GZmIzMjI8PT0jIyNFIlFubq5+AsbTAYDx/P39L126tGrVqn//+9/19fWPP/64fg7N2EtsbGxqauqWLVucnZ2t19i5wfp0ALAjlju7jqafnp+ff/r06fDw8OPHj5s25GJ96KcDAOPpTIo+7B5eTz311GeffXb27Nlbt25FRkbu27evq6vLUm2cM2pvAGpZznz41i8iIiKi8TiXMzGML3ohM+4NoFarP/300z//+c9r1qxJTU2NjIw0oRFWgHUvAGBH5rLuxdDTGda9UNhsdmpqamNj4y9+8Yt33nnHhEZYB9a9AADj6WzEaPq+jM7Ozlu3bv3mm2/M0y4LwHg6AABhwF67FPTTAQCIpfdltALsn46IiGhfcS5zpDMyOEdKfQX/1KlTf/nLXzIyMjIyMi5evGiJFpgF1qcDgB2x6vp0iln2ZbQajKcDABBL78toNRhPBwAgRvZPf++997Zt2yYUCkUikTUbZBr00wGA8VQqVXt7OzVu4+7uvmLFCi8vL50cgzU9ISEhISFB83SebxKAfjoAMF5zc7P2eaRXrlzRP0fI7tcyYt0LIiKifUXbrHuxL1j3AgB2xLR1LyqVSiaTaY+9eHt7a16l1r0YHHvROU7ItHOOrAbj6QDAeHM6j1RbW1ubzkEWs3L06FEjP65QKBISErhcbmJiolKppM2ZnJyUSCShoaE8Hq+oqEg/AePpAMB4D3MeKU1N15zjzP5JXFxcWlqaaY1obm6WSqVGErKysoRCoUwmEwgE2dnZtDmFhYXNzc1VVVUtLS20dR/9dABwBNS+XfHx8bQbeBHasRdqjMUsgy3j4+O7du06dOjQ7373O0M51dXVNTU1Hh4eqamp+nO4lNLS0rKyMn9/f0JIXl6efgL66QAAxNLrXnJyclauXPmrX/3KSM7AwACHw0lOTuZwOP39/bQ5crk8ICCAaP0NoTGtUqlLSkYViuHqakIIIiIi4jyPU/396pKSybY2YgGWXfeyZMmS+/fva57Sdvz5fH5tbS2Xy5XL5TExMTKZTD9HIBBUVFQEBgYSA39AYN0LANgRs+z3YsqZGBqmzZHevXtXrVZTJdjQSI5IJJJKpWq1WiqVRkdH0+YkJSVJJBKVSmVoRSfG0wEAiJG1jJaj09HOycnZtWsXn8+PiIj45JNPaH8kIyMjMzMzMjJywYIFubm5+gkYTwcAxjN0Bqk23ZquKbhzWbyoT7uI63TY/fz8KioqjP+4q6vr0aNHjYyuoJ8OAIyns9blodYy6hRfDUu0zyyovQGobSPnw7d+EREREY1HW56JYejpfCMWi4uLi23dCgCAh2KDMzF0Kvh8LugE4+kA4AB0Bltox15sMEdqCRhPBwBHMOM0qcGa3tnZKRaL6+vrWSzW+vXrjxw5Qn3rZ35CPx0AHIH2NOnD7vdC2blzZ1RUVFtbW2tra0RExM6dOy3SQDNBPx0AGE9n3Qvtli8Ga3pra+uePXuo7+K/+eabV69eNX8DzQHrXhAREe0r2mbdS15e3oIFC1JSUgghJ06cGBsbO3DggCVaYBZY9wIAdsS0dS/6gy36ewPQfOdI+2lOTo7m8Xyu6RhPBwDGoyq4TCYbGBiIiIhYuHChfo5uTZ/naxYNwXg6ADDe2NhYS0vLxMRESEhIc3OzQCD42c9+ppPDkLWM6KcDAONdvHgxKCgoKCiIxWJ5eHhcvXr1ySef1Mmx7P7pVkDNkVKzDfNh9gMRERHReDR5jnTdunXBwcEsFosQ4urqKhQK9XMsu3+61WD/dACwI5abI7X7fjoF4+kA4AhmPI/UsjX9iy++WL169aOPPhodHV1XV0ebo1AoEhISuFxuYmIi7fnRhJDJyUmJRBIaGsrj8YqKivQTMJ4OAEAsXdMrKipKS0u7urpSUlJ27NhBm5OVlSUUCmUymUAgyM7Ops0pLCxsbm6uqqpqaWmhrfvopwMAEKuNp3d1da1Zs0apVC5YsEDnJT6fX1NT4+fnZ+Q80tWrV5eVlfH5fEP3x3g6ANgRG+y1a0YqlWrHjh0pKSn6BZ0QMjAwwOFwkpOTORxOf38/7R3kcjm1gxi1V4H2S9MqlbqkZFShsPlZ4IiIiIgPE6f6+9UlJZNtbWSWKvXo51i8n97U1PTKK68kJSVlZ2c7OdH8CuHz+bW1tVwu10g/XSAQVFRUBAYGEgOnc6CfDgB2ZC799PHx8W+//TY+Pr6ystLa614+++yzt9566+TJkxKJhLagE0JEIpFUKlWr1VKpNDo6mjYnKSlJIpGoVCpDKzoxng4AjmBsbOw///mPs7Pz4OCgiwvNl0YtW9P37Nlz+fLluLg4asyEqrz6W8o0Njby+fympiZDW8pkZGR4enpGRkaKRKLc3Fz9BKx7AQDG6+jouHjxoru7e3h4eENDAzV0oYMh3znCvowAYEdMG3u5fPnyqlWr3NzcaF9lyHeOsH86IiKifUWT9waIiIgwVNA10E8HALA2+17LaAUYTwcAIIyp6Vj3AgBAGFPT0U8HACCMqenopwMAEAbUdKx7QUREtK9o8rqXh4F1LwAA1oZ1LzPAeDoAAGFMTcd4OgAAYUxNRz8dAIAwoKZTc6TUbMN8mP1ARERENB4xRzoz7J8OAHYEc6QzwHg6AACxdE1XKBQJCQlcLjcxMZH2bOiHzJkRxtMBwO6cSUtTm3sExrI1PSsrSygUymQygUCQnZ1tcs6M0E8HALvTfv58yebNF6XSqfFxc92T5ugjM6qurq6pqfHw8EhNTY2JiTE5Z0bopwOAPZq6d6/uxInWr76K3bcv2MDhnbNi2Zo+MDDA4XCSk5P/9re/9ff3m5xDSyaTlZaWPhgfn+rsbFAq33r5ZefHHpvu7UVEREScz9HJ03Oqs9PZ1/eRn6rZ/akpc3XVLVvTvby8+vv7y8rK5HK5j4+PyTm0VqxYIZFIqMdisfj9I0fM0GIAAGs5Ghbm4ur6zN69q196yXnBArPc07Lj6SKRSCqVqtVqqVQabeDPiofJmZGrq6vJjQQAsInHn3/+tbNn1/7mN+Yq6MTSNT0nJ6exsZHP5zc1NR04cIC6yGazZ8yZLScnhizKBADHkVhYyH7sMfPekyHfOZLJZCtWrLB1KwAAbIZR3zlCQQcAIIyp6QAAQFDTAQCYBDUdAIA5UNMBAJgDNR0AgDlQ0wEAmAM1HQCAOVDTAQCYAzUdAIA5UNMBAJgDNR0AgDlQ0wEAmAM1HQCAOVDTAQCYAzUdAIA5Znceqc4RRdrUavVc2sFmsw3dwchLAACgbdb99Ad0/wxhs9lsNpvL5W7atKm8vNy0JuoXdCO/Wsxrjm9ktXYCAFBm1083gVqtHh4ebmhoEIvFU1NTSUlJln5HAACHZY3xdHd39+jo6GPHjn300UeEkNu3b2/fvp3L5T711FM//PCDJi07O9vX1zc2Nrazs5O6wv6JJkfzVOc6rXPnzq1fv97Hx0c7uaOj47nnnvP19X3uuec6Ojq075yfn+/r6ysSiYy8EfXU09PzmWeeqa+v11z8+OOPAwIC+Hz+2bNnZ9tOAABzsd4caXh4eFtbGyEkPT09OTm5s7MzLy/vzTff1CS4ubn997//ff7558ViMXVFrVbrDLxorui/pC8lJaWwsLC3t1c7WSwWx8XF3bhxIyYmRvNGlNHR0evXr4eHhxt5I+ppX19fQUHBq6++qrk+ODh47dq1goKC/fv3z7adAADmwmpsbCSELF++/GGy2Ww27eg5y8Acqfb05r1795YuXdrX1xcQEHDnzh3qopOT0927d6lMuVxO5a9aterWrVu0NzF0hVZiYmJfX190dPSTTz75wgsvuLm5EUJ4PN61a9fYbPbQ0NCqVat6eno091QoFO7u7sbfqLq6et++fe3t7RMTEywWa2hoiEpTKpVubm7T09Pe3t6Dg4OzaicAwNydOnWKWLOf3tTUtHLlSkKIk5OTUqmkOrBUQdfBYrHM8o5ffvllbm6ut7d3SUnJiy++OGO+TkGntXv37nfffVehUCgUigcP/v8XHPULw9nZeXp6ei5tBgCYC2vU9JGRkdra2t///vepqamEkI0bN2ZnZ+tX8+Li4pGRkeLi4nXr1hm/oYeHBzWMY5yLi8vGjRvT0tLefffdH3/8kboYFRX1pz/9aWRk5MSJE1FRUbN9o7GxMR8fn4mJifz8/Bkb8JDtBAAwF4uve2Gz2YsXLxYIBBkZGVu3biWEHD58WCwWCwQCaoxCMzoxOTkZHBwcFhZWUlKi+VntB5rMvXv3xsbGDg8PGx/ZoH5q4cKFfD7/448/pi5+8MEHr7/++tGjR5944gnNRUP03yg/P//ll1+enJykxs1n++MAABY16/F0Qy+hbAEA2BA1nj67fjoKNwDAfIb9XgAAmAM1HQCAOVDTAQCYAzUdAIA5UNMBAJgDNR0AgDlYjY2NQ0NDN27csHVLAABgrlwGBwe1t5wFAAD79X/LxBHXVzfZAQAAAABJRU5ErkJggg=='"

Merci :)

Édité par Nicox11

+0 -0

Cette réponse a aidé l'auteur du sujet

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.

« There was a kingdom that was falling so fast that people wouldn't help it, they wouldn't make it last » - Animal Kingdom, Beau

+1 -0
Auteur du sujet

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.

+0 -0

Cette réponse a aidé l'auteur du sujet

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.

Auteur du sujet

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 :)

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

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