A base64 image in svg does not display at the first time

Question

I'm developing a hybrid application using cordova.

For some reason, I need to save an SVG image in witch there is a base64 image and some text in my SQLite. I saved the text of SVG source in a format 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>

but when I get this value from database and set it as the src of img like this:

JS:

$scope.blackboard.svgSource = "data:image/svg+xml;utf8," + res.rows.item(i).svg_source;

HTML:

<img ng-src="{{blackboard.svgSource}}"/>

the table in SVG will display normally, but the base64 image will not show until it has been display once in the other pages (there is a page of all the pictures can put into the SVG).

As the image in the SVG can be shown after it has been showed in another page, the base64 data is right I think.

But why can't it show in the first time?

Any help is appreciated!

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

I'm sorry to ask this question which now I solved by myself.

It seems not good to use SVG, which has a base64 image in it, in the src attribute of <img>.

I finally found that the ng-bind-html directive in angularJS is really fit for my situation, which can create in-line SVG. And in this way, the base64 image will display at the first time.

If you have an interest in this question, please take a look at this:AngularJS : Insert HTML into view

edited May 23 '17 at 11:52

Community

1
1

answered Mar 09 '16 at 06:59

Simon Bai

120
1
12

Its perfectly possible to use SVG, which has a base64 image in it, in the src attribute of ``. I don't know what your problem actually is but it isn't that. – Robert Longson Mar 09 '16 at 07:29
@RobertLongson Thanks for your comment first.Actually, in my case, I have to show the base64 image at least once before I open the page which contains the SVG above. Or, the SVG will display only without the base64 image. – Simon Bai Mar 09 '16 at 07:39
ah... As the base64 code is too long, I just cannot give a more verifiable example. You can treat the SVG source as a string, and the result of `res.rows.item(i).svg_source` in the **JS** block is the string of SVG source above. **HTML** block show how I bind the source into the `` tag. – Simon Bai Mar 09 '16 at 08:24
Minimal means precisely that, cut down the SVG file. – Robert Longson Mar 09 '16 at 09:48

A base64 image in svg does not display at the first time

1 Answers1