Включение внутренних изображений в HTML: встроенные, относительные, абсолютные, Base64 и SVG.

Чтобы отобразить изображение в HTML, вы можете использовать тег . Вот несколько методов, которые можно использовать для включения внутреннего изображения в HTML-файл:

  1. Источник встроенного изображения:

    <img src="image.jpg" alt="Description of the image">

    В этом методе файл изображения (в данном примере «image.jpg») расположен в том же каталоге, что и файл HTML.

  2. Относительный путь:

    <img src="folder/image.jpg" alt="Description of the image">

    Если изображение находится в подпапке того же каталога, что и HTML-файл, вы можете указать относительный путь к изображению.

  3. Абсолютный путь:

    <img src="https://example.com/images/image.jpg" alt="Description of the image">

    Вы также можете использовать абсолютный URL-адрес, чтобы указать источник изображения, который может быть удаленным местоположением или вообще другим доменом.

  4. Кодировка Base64:

    <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAD/2wBDAAoHBwkHBgoJCAkLCwoMDxkQDw4ODx4WFxIZJCAm..."
        alt="Description of the image">

    Кодировка Base64 позволяет встраивать изображение непосредственно в файл HTML, используя URL-адрес данных. Этот метод полезен, если вы хотите включить небольшие изображения и избежать дополнительных HTTP-запросов.

  5. Изображения SVG:

    <img src="image.svg" alt="Description of the image">

    Если у вас есть изображение SVG, вы можете использовать тег , чтобы включить его в свой HTML-файл.