Question

我正在使用cordova开发混合应用程序。

出于某种原因，我需要保存SVG图像，因为我的SQLite中有base64图像和一些文本。我以这样的格式保存了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>

但是当我从数据库中获取此值并将其设置为src img时，这样：

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数据是正确的。

但为什么不能在第一时间显示呢？

任何帮助表示赞赏！

Answer 1

我很抱歉问这个问题，现在我自己解决了。

在<img>的src属性中使用SVG（其中包含base64图像）似乎不太好。

我终于发现angularJS中的ng-bind-html指令非常适合我的情况，它可以创建内联SVG。这样，base64图像将在第一时间显示。

如果您对此问题感兴趣，请查看以下内容：AngularJS : Insert HTML into view

svg中的base64图像不会在第一次显示

1 个答案: