Другие способы встраивания изображений в HTML, кроме URI данных

Question

У меня есть приложение, которое имеет много выходов. Один из них - это HTML-отчет. Результатом обработки является много информации, в том числе 1 большое изображение и несколько меньших изображений.

Я вложил их в документ HTML, поэтому отчет представляет собой один файл, который можно легко обменивать. Встраивание с использованием data:image/png;base64,... работает, но невероятно медленно загружается по сравнению с внешней связью изображений.

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

Answer 1

попробовать что-то вроде этого (CSS/Jquery):

.img { 
    background: url(arrow.png) no-repeat; 
} 

$("<img src='your-image.png'/>").prependTo(".img"); 

Answer 2

Вы можете рассмотреть загрузить изображение (ы) с помощью холста.

С AJAX вызова

<canvas id="myCanvas" width="578" height="200"></canvas> 
<script> 
    function loadCanvas(dataURL) { 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 

    // load image from data url 
    var imageObj = new Image(); 
    imageObj.onload = function() { 
     context.drawImage(this, 0, 0); 
    }; 

    imageObj.src = dataURL; 
    } 

    // make ajax call to get image data url 
    var request = new XMLHttpRequest(); 
    request.open('GET', 'http://www.html5canvastutorials.com/demos/assets/dataURL.txt', true); 
    request.onreadystatechange = function() { 
    // Makes sure the document is ready to parse. 
    if(request.readyState == 4) { 
     // Makes sure it's found the file. 
     if(request.status == 200) { 
     loadCanvas(request.responseText); 
     } 
    } 
    }; 
    request.send(null); 
</script> 

Answer 3

Там нет другого способа вставлять изображения в HTML . Другим распространенным вариантом является использование файлов MHTML, которые могут быть прочитаны/созданы большинством веб-браузеров (см. Раздел См. Также раздел для другого автономного html в одном файле), но MHTML при закрытии на самом деле не является HTML.

Который подводит меня к:
Если требование состоит в том, чтобы создавать отчеты в одном файле, а HTML с URL-адресами данных не сокращает его. Тогда, возможно, вам следует рассмотреть другие форматы (cough PDF cough). Библиотеки с открытым исходным кодом для преобразования HTML в другие форматы легко доступны.

Другой вариант, предполагающий, что изображения представляют собой диаграммы, заключается в использовании CSS для рендеринга их вместо генерации изображений, но это, безусловно, будет более сложным и потребует изменения генератора отчетов.