Currently, I am in the process of developing a hybrid application using cordova.
Interestingly, I have encountered a situation where I need to store an SVG image containing a base64 image and some text in my SQLite database. The format in which I saved the SVG source text is like this:
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" style="margin-top:5px;text-align:center" class="ng-scope">
<foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="width: 390px;height: 290px;background-color: #2B6E44;padding: 4px">
<table style="width:100%;height:100%;border-collapse:collapse;border:2px solid white;color:white;font-size:1em">
<tbody>
<tr>
<td colspan="2">
<div class="forImg" style="height:100%;width:50%;float:right">
<img ng-src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAZAAA/+4ADkFkb2JlAGTAAAAAAf/.............
..........................................
L0JEX//Z" style="display:block;max-width:180px;max-height:170px;width:auto;height:auto;" />
</div>
</td>
</tr>
</tbody>
</table>
</foreignObject>
</svg>
Despite following this format, when retrieving this value from the database and setting it as the src attribute of the img element using JavaScript:
JS:
$scope.blackboard.svgSource = "data:image/svg+xml;utf8," + res.rows.item(i).svg_source;
HTML:
<img ng-src="{{blackboard.svgSource}}"/>
The table in the SVG displays correctly, but the base64 image does not load until it has been displayed once on another page (where all the pictures are placed into the SVG).
Considering that the image in the SVG can be shown after being displayed on another page, I believe the base64 data is correct.
However, I am puzzled as to why it doesn't show up the first time around?
I would greatly appreciate any assistance!