0

I am trying to display an JPG image in HTMl after conversion to base64. This operation I am trying in XSLT code. Couple of options I tried with concat and write-binary, but none of them seem to be working. Is this supported using XSLT? Is there any built-in function available? 

<img>
            <xsl:attribute name="src">
              <!--xsl:value-of select="concat('data:image/gif;base64,',xPath)"/-->
              <xsl:value-of select="file:write-binary(C:\MyDesktop\Desktop\allImages\download.jpg, xs:base64Binary(string()))"/>
            </xsl:attribute>
          </img>
Dev's
  • 27
  • 5
  • 1
    Hello ! Take a look at https://stackoverflow.com/a/1687218/1139792 – bZezzz Nov 19 '19 at 11:17
  • So what do you have, a JPG image file you want to display in an HTML document? Use the `img` element with its `src` attribute ``. It is not clear why you think you need to use base64. – Martin Honnen Nov 19 '19 at 13:40
  • @MartinHonnen As you can see I am using an 'img; element. But that puts a dependency on image path, I would like to share the output HTML on various while continue to show the image. So the approah I thought is- get the image path, convert it into base64 and use it in img element. – Dev's Nov 20 '19 at 06:56
  • So you want to inline the image data in the HTML? These days I think there is good support for data URIs. But converting the JPEG using XSLT is certainly not one of the usual tasks you would use XSLT for. Do you use an XSLT processor like the commercial versions of Saxon 9 that have support for the EXPath file module? – Martin Honnen Nov 20 '19 at 09:39
  • @MartinHonnen Yes, I can make use of Saxon 9. Is there any available function in it to inline image data in HTML? – Dev's Nov 21 '19 at 06:44

1 Answers1

2

Assuming you have access to e.g. Saxon PE or EE with support for the EXPath file module http://expath.org/spec/file then I think it suffices to construct a data URI https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs using the file:read-binary method http://expath.org/spec/file#fn.read-binary:

In the XSLT you can use e.g.

<img src="data:image/jpeg;base64,{file:read-binary('C:\MyDesktop\Desktop\allImages\download.jpg')}"/>

to construct an HTML img element that has the image data inlined in the data URI set as the src attribute value.

The stylesheet obviously needs to declare the module's namespace with e.g. 

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:file="http://expath.org/ns/file"
    exclude-result-prefixes="#all" version="3.0">
Martin Honnen
  • 160,499
  • 6
  • 90
  • 110