Display images from the input XML

Top Previous Topic Next Topic  Print this topic

Overview:

Sometimes images must be displayed from the input XML. In most common cases, images can be found in the XML referred by their URL or encoded as a Based64 string.

 

Solution:

 

Steps to insert an image from the input XML Data Source:

1. The base64 string, that corresponds to the image to be displayed, must be inserted into a tag in the XML Data Source which will be assigned to the template file.

2. The Insert Image dialog must be accessed and the ".." button corresponding to the File URL field must be selected.

3. The Property Value dialog will be displayed, from where the Dynamic value from input XML option must be chosen.

4. In the Edit Expression dialog, the following expression must be inserted:

 

 

    concat('data:image/image_type;base64,',xpath)

 

 

image_type - represents the image file's type. It must be replaced with one of the available formats: JPEG, PNG etc.
xpath - represents the XPath of the node where the base64 string is located.

 

Note:

Base64 encoding schemes are used for encoding binary data that needs to the stored and transferred. These schemes ensure that the data remains intact and suffers no modification during transport.

 

 

To better understand how to insert images from input XML Data Source, an example is provided below.

An XML that contains the students from a classroom has been created. For each student, the name, age and an image that represents them must be inserted.

 

I. First, a Repeating Row, that displays the name, age and image for each student, must be inserted. In this scenario, the XPath for the row is: /classroom/student.

 

II. In the column containing the image, the image must be inserted respecting the steps from 1 to 3 mentioned above.

 

III. When reaching step 4, given that the image must be displayed in a row repeated after a particular XPath, the following expression must be inserted in the Edit Expression dialog:

 

 

   concat('data:image/PNG;base64,',img)

 

 

Output:

 

Design View:

 

insert_image_from_xml

 

PDF result:

 

insert_image_xml3