从JSON嵌入SVG

Question

我在网络开发方面真的很陌生，我目前正在使用AngularJS框架，因为对于像我这样的初学者来说，它很容易合作。

我使用$ http.get

通过API提取JSON数据

我有一个"<img src="data:image/svg+xml;base64,PD94bWwg... />"

的字段

我是否有可能以某种方式将其嵌入到html中以实际显示图像？由于该字段已包含该位，因此我尝试执行此操作：＆lt; {{field_427}} /＆gt;但它不起作用。有人有什么建议吗？

Answer 1

在没有<img>的情况下直接返回svg更容易吗？ 你应该可以使用

<object data="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0i...."></object>

在angularjs中，这将是：

<object data="{{base64String}}"></object>

使用链接创建指令应该不会太复杂。你可以找到足够的例子。

您的问题的解决方案是绑定到

// inject $sce in controller
// Load html
$scope.svg = $sce.trustAsHtml(imgTagWithHtml)

// In view
<span ng-bind-html="svg"></span>

Answer 2

如果您控制两端，则应避免从API返回html，因为必须像Marc的评论那样对其进行信任。相反，返回base64数据并不使用img html标记。然后使用范围将src应用于视图。或者，创建一个HTTP Get端点，返回带有200响应的图像和图像数据。