I ran into this issue trying to use plutobook. If I add base64 encoded image data using content: url() it does not get rendered. If I add it directly as a src for the image element it does get rendered. Looking through the documentation it seems like this is supposed to be supported, but I'm not 100% sure.
In the browser using the HTML both pages render the images correctly:
But on the output PDF the first page is missing the gradient image:
Here is a minimal example to reproduce:
#include <plutobook.hpp>
static const char kHTMLContent[] = R"HTML(
<!DOCTYPE html>
<html lang="la">
<head>
<meta charset="UTF-8">
<title>Magnum Scopulum Corallinum</title>
<style>
body { font-family: "Segoe UI", sans-serif; line-height: 1.6; margin: 40px auto; max-width: 800px; color: #222; }
h1 { font-size: 2.5em; margin-bottom: 20px; }
page { width: 210mm; height: 297mm; position: relative; background: white; display: block; margin: 0 auto; margin-bottom: 0.5cm; }
img.gradient {
content: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QBaRXhpZgAATU0AKgAAAAgABQMBAAUAAAABAAAASgMDAAEAAAABAAAAAFEQAAEAAAABAQAAAFERAAQAAAABAAAOxFESAAQAAAABAAAOxAAAAAAAAYagAACxj//bAEMAAgEBAgEBAgICAgICAgIDBQMDAwMDBgQEAwUHBgcHBwYHBwgJCwkICAoIBwcKDQoKCwwMDAwHCQ4PDQwOCwwMDP/bAEMBAgICAwMDBgMDBgwIBwgMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDP/AABEIAB8ByAMBIgACEQEDEQH/xAAfAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgv/xAC1EAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+fr/xAAfAQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgv/xAC1EQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AOti7Vbi6VVj+8KtRV/I5/nzEswVbi5qpb8mrcVaGyLUPSrdvwRVWGrVv1q0bRLcBxVuOqkI5q1FWkTZFq361cgGTVSCrcHWtEbRLUR4q5a1TjOauWnJrTodFH4jStK07Wsy161pWo6fSuaofXZd0NO1rTtDwKzLXrWnaDAFcdQ+4y807XrWnZ9qzLQ1p2fGK4qh91l/Q0rStO06isy07VqWnNccz7jL+ho2prTtOorNteRWlajBrimfc5f0NO2p7nmo7XmpJOtcvU+xw/wkb9ahbg1M/Won+9WkTriRSjmoX6VNKahetonREilqJ+lSy1E/Stom8diF+lRydKlbpUUnStonREhNRt0qQnNRPW0TeJBNVOarktU5hxVHXTKc3Q/41TnOFq3N0NVJzlazO6mU7g8VSuBV256VSnrNndTKk/3qpz8k1cn+9VOb7xrKWx6FMozdapzd6uTdaqTd6zZ3UypN0qjc9KvTDiqNz92o6ndTM2671mXZrTu+prMuq7aJ61EzLvpWfddDWhd9Kz7roa9OketRMu8PNZt3Wnd1m3fSvSonrUTMuzWbdda0rvisy64r1KJ69EzrrjNZl13rSuuCazLvo1elTPWomdc8mii4+9RXdHY9E9FiPzVajGBVSPrVuI818Cf80MSzAeatxGqsHWrUQ5q4myLcI4qzBVaLpVqDrWqNoluHrVuOqkPWrUZ4q4m0S1BVyAc1UgFW4etaI2iWojVyz61TjHNXLUVp0Oij8SNO161p2nOKy7U81pWnOK5qh9bl3Q07btWnaVmW3WtO1OMVx1D7nLzTtOa07PtWXaVqWfQVxVD7rLzSta07Qc1mWladoORXFM+4y/oaVpxWnadazLT5q07Xr+NcdQ+4y/oadpT5OtR2pqRxg1y9T7LD/CRv1qJutSP1qN+taROuJFLUL1LKMGonraJ0RIpBUT8CppBmoW6VtE3iRN0qKTpUjnio3+7W0ToiQsajccVI3INRk4FbRN4leY9apzHg1cm61TnBqjrplOXgVTn6Vcn6VTn6Vmd1Mp3NUZ6vXHNUrg1md1MqT9apzDBq5OMNVOespHoUylN96qcverc45qnKOtZs7qZVn6VRuelXpzwao3PSo6ndTM275asy74rTu/vGsy74rtonrUTNu+BWdd9DWhdfdNZ91yDXp0j1qJl3fSs276VpXdZ12K9KietRMy7rNuutaV1zWZdGvTonrUTNuOprNux1rSuazboYBr06R69EzbjlqKJ/vUV3R2PRP//Z);
}
</style>
</head>
<body>
<page>
<img src="https://picsum.photos/id/128/800/400" alt="Magnum Scopulum Corallinum">
<img class="gradient">
</page>
<page>
<img src="https://picsum.photos/id/128/800/400" alt="Magnum Scopulum Corallinum">
<img src="data:image/jpeg;base64,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">
</page>
</body>
</html>
)HTML";
int main() {
plutobook::Book book(plutobook::PageSize::A4, plutobook::PageMargins::None);
book.loadHtml(kHTMLContent);
book.writeToPdf("bug.pdf");
return 0;
}
I ran into this issue trying to use plutobook. If I add base64 encoded image data using content: url() it does not get rendered. If I add it directly as a src for the image element it does get rendered. Looking through the documentation it seems like this is supposed to be supported, but I'm not 100% sure.
In the browser using the HTML both pages render the images correctly:
But on the output PDF the first page is missing the gradient image:
Here is a minimal example to reproduce: