图像未在 iPad d3js 上显示

Question

我在 iPad 网络应用程序中使用 d3js 和 AngularJS。在 Safari/Chrome 上运行时，一切看起来都不错，但在 iPad 上运行时，我用 d3js 附加的图像不显示。

这是我的 JS：

directive('zoomScreen', [function() {
    return{   
    restrict: 'E',
    link: function(scope, elm, attrs) {   
    var width = 1024,
    height = 660;
var offset= [{"xoff":-20,"yoff":10,"swipe_class":"left"},{"xoff":-80,"yoff":0,"swipe_class":"right"},{"xoff":0,"yoff":-80,"swipe_class":"left"},{"xoff":50,"yoff":0,"swipe_class":"left"}];
var svg = d3.select("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g");
var back = svg.append("image")
         .attr("class", "logo")
         .attr("x", 375)
         .attr("y", 175)
         .attr("xlink:href", "../images/brain-back.png")
         .attr("height", 300)
         .attr("width", 300)
         .style("fill", "transparent")
         .style("stroke", "black")     
         .style("stroke-width", 1)
         .on("click", outClicked);
var image = svg.append("image")
         .attr("class", "logo")
         .data([offset[0]])
         .attr("x", 485)
         .attr("y", 175)
         .attr("height", 90).attr("width", 90)
         .attr("xlink:href", "../images/image1.png") 
         .style("stroke", "black")     
         .style("stroke-width", 1)
         .on("click", clicked);
var image2 = svg.append("image")
         .attr("class", "logo")
         .data([offset[1]])
         .attr("x", 545)
         .attr("y", 255)
         .attr("height", 90).attr("width", 90)
         .attr("xlink:href", "../images/image2.png")    
         .style("stroke", "black")     
         .style("stroke-width", 1)
         .on("click", clicked);

还有我的 HTML：

<zoom-screen>
<svg class="accel"></svg>
</zoom-screen>

奇怪的是 iPad 知道那里有元素，因为它允许我突出显示并单击它们，但它不显示图像。

Answer 1

原来我只需要convert image to base 64 string。所以我只是将字符串设置为 var 并让我的 xlink:href 指向 var 而不是位置。例如：

var image1 = "data:foobase64stringhere";

.attr('xlink:href',image1)