svg中的base64圖像不會在第一時間顯示

我正在開發使用cordova的混合應用程序。svg中的base64圖像不會在第一時間顯示

出於某種原因，我需要保存一個SVG圖像的女巫有一個base64圖像和一些文字在我的SQLite。我救了SVG源的文本在這樣的格式：

<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>

，但是當我從數據庫中獲得此值，並將其設置爲img的src這樣的：

JS：

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

HTML：

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

SVG中的表格將正常顯示，但base64圖像只有在其他頁面中顯示一次後纔會顯示（所有圖片都可以放入SVG中）。

由於SVG中的圖像可以在其他頁面顯示後顯示，因此我認爲base64數據是正確的。

但爲什麼它不能在第一次顯示？

任何幫助表示讚賞！

來源

2016-03-09 Simon Bai

我很抱歉問這個問題，現在我自己解決了。

在src屬性<img>中使用SVG，它有一個base64圖像似乎並不好。

我終於發現angularJS中的ng-bind-html指令非常適合我的情況，它可以創建串聯的SVG。通過這種方式，base64圖像將在第一時間顯示。

如果你有這個問題感興趣，請看看這個：AngularJS : Insert HTML into view

來源

2016-03-09 06:59:16

它完全可以使用SVG，其中有一個base64圖像，在'' src屬性。我不知道你的問題實際上是什麼，但事實並非如此。 –

@RobertLongson感謝您的評論first.Actually，在我的情況下，我必須顯示base64圖像至少一次，然後打開包含上面的SVG的頁面。或者，SVG只會顯示沒有base64圖像的圖像。 –

創建一個[mcve] –

svg中的base64圖像不會在第一時間顯示

回答

相關問題