image href - base64 string

[fjeneau]

Hi,

I have a client using DITA with oXygen 23.1.

Their image tags looks like:

Code: Select all

<image href="456"/>

The actual image data is stored as blobs in a SQL database. I have a REST endpoint (xquery) exposed in eXist-db that makes a SQL fetch to the server and returns the blob data as a base64-encoded string. The returned string is prefixed with "data:image/jpeg;base64," followed by the actual base64 image string.

I've tried setting up the CSS like:

Code: Select all

image {
    content: oxy_url(oxy_concat("httpURLtoExistDB.../getImage.xqy?id=",attr(href))) !important;
}

I've played around with the serialization parameters on the xquery side. Besides no serialization, I've tried:

Code: Select all

declare option exist:serialize "method=text media-type=image/jpeg";
...
(: tried with and without the data:image/jpeg;base64, prefix :)
(: return $imgDoc :)
return "data:image/jpeg;base64," || $imgDoc

Code: Select all

declare option exist:serialize "method=xhtml media-type=text/html";
...
let $src := "data:image/jpeg;base64," || $imgDoc
return <img src="{$src}"/>

Am I missing something? Is there a way for a DITA image to render in oXygen with the href attempting to display a base64 image string?

[Radu]

Hi,

Oxygen has support to display base 64 embedded images, but the images need to be embedded, the URL itself for the image target needs to be of form "data:image/jpeg;base64,.....".
In your case you are pointing Oxygen to an URL on an Exist server, URL which serves a string which is a base 64 URL, this does not work in general, neither in Oxygen nor in any other tool.
What you could serve from your remote URL would be a vectorial SVG image (SVG images are in XML form so they can be produced by XQuery). And SVG in turn can embed inside base 64 images like:
https://stackoverflow.com/questions/624 ... map-images
or refer to a binary image inside the SVG:
https://developer.mozilla.org/en-US/doc ... ment/image

Regards,
Radu

[fjeneau]

Hi,

Oxygen has support to display base 64 embedded images, but the images need to be embedded, the URL itself for the image target needs to be of form "data:image/jpeg;base64,.....".
In your case you are pointing Oxygen to an URL on an Exist server, URL which serves a string which is a base 64 URL, this does not work in general, neither in Oxygen nor in any other tool.
What you could serve from your remote URL would be a vectorial SVG image (SVG images are in XML form so they can be produced by XQuery). And SVG in turn can embed inside base 64 images like:
https://stackoverflow.com/questions/624 ... map-images
or refer to a binary image inside the SVG:
https://developer.mozilla.org/en-US/doc ... ment/image

Regards,
Radu

Thanks -- that worked. I ended up doing something like this in the xquery:

Code: Select all

xquery version "3.1";

declare option exist:serialize "method=xml media-type=image/svg+xml";

let $id := request:get-parameter("id","")
... (: call to SQl db not included here :)
let $src := "data:image/jpeg;base64," || $imgDoc
let $width := image:get-width($imgDoc)
let $height := image:get-height($imgDoc)
return
<svg xmlns="http://www.w3.org/2000/svg" width="{$width}" height="{$height}" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image width="{$width}" height="{$height}" xlink:href="{$src}"/>
</svg>

and this in the CSS:

Code: Select all

image:before {}
image {
    content: oxy_url(oxy_concat("httpRESTPathToQuery/getImage.xqy?id=",attr(href))) !important;
}

[Radu]

Hi,

Cool, thanks for posting the solution.

Regards,
Radu