Возможно ли в HTML добавить изображение без src, то есть чтобы все они были прямо в html-файле?

Подскажите пожалуйста, возможно ли в HTML добавить изображение без src, то есть чтобы все они были прямо в html-файле?

И если возможно то как это сделать?

Я имею ввиду примерно следующее:

<img alt="Описание" title="Описание" какой-то-ещё-тег="как_то_закодированное_содержание файла" />

Ответы (1 шт):

Автор решения: Krasnikov Kirill

В src можно записать не только путь к файлу, но и его содержимое, закодированное в base64. Это довольно редко используют.

Пример (тут закодирован логотип stackoverflow):

<img src="data:image/jpg;base64,/9j//gAQTGF2YzU4LjU0LjEwMAD/2wBDAAg8PEc8R1JSUlJSUmFaYWVlZWFhYWFlZWVsbGx/f39sbGxlZWxseHh/f4qOioODf4OOjpaWlrS0rKzS0tn/////xAB5AAACAgMBAQAAAAAAAAAAAAAABgcFAQIDBAgBAQEAAwEAAAAAAAAAAAAAAAABBQMGBBAAAgIBBAECBAYDAQAAAAAAAAECESExEkEDUWFxkTIiBKHBsYETMxRCUvERAQEAAgMBAQEAAAAAAAAAAAABIRFBAjHwEmL/wAARCAAkAJUDARIAAhIAAxIA/9oADAMBAAIRAxEAPwCegAAAAPG5Ja8lS93K3L0PPbI8F3zNx6JLXvmuLqu0W09r/b1KZLdo8LnlGyXOqx0m/sxqsxuMlbr7FOpWymo1q29EtTpBzYshRl204YdO7w7wADcUL7EtVLGrp18QAvijfZFOsutaTde4AXgpKdS7G3hbf0ABtKGXZGEU3edFz8AAvhK/yIVeVmmqyr8gA6i7LtjGW1+LfhIAGIVI90ZOvqWLVqrXoADWJMfuIyqlLPoADsfPy7Jvr3bpXuXoudPzCiPoEV590YOnbetJXggoaBaj3Qk0l/srQAMop/zw2ylmougAbDknasAOoABSt5l4o7OObujTfG5unrSU8cb0NW1/9HKY4/UdW6vP81yisTdc68lltfkx3VkWR7Mc8XZWG9y1zG8fC9fYuW6/EAEBOW6MnucU3TazTXKS8+g8XkAI8m5NTT339VJLFccfmSFb/UAFyL/j3WpZdqk3eFjHIy2ACS+tznN5XyuPi0vx8Drf/n7gAjdu6S657X9Ltx5HiwAjZQfa+2VOKkkletokpN4KgIdj1zn1zbT3OkvaNE6FRFQ7BbpL+64p/NVL00JiABC+3TXVTVaj6AEI7JP7dKnaldc6k3FRFRLucex9myTUo+Mp+pLQAQK+ucOqDSe5N45qRPRURUGPpcZQgvlltcveOpOZURQAAAAAAAAAAAABgyAGhuAHGjsAGpsAGDIAamwAYMgAAAAAAAAAAAAAAAAAAAAAAf/Z" alt="">

URI имеет такой формат:

data:[mime тип (image/png, image/jpg)];base64;[закодированное изображение]

В интернете есть конвертеры в такой формат, гуглите "image to data uri".

Подробнее: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

→ Ссылка