Question

为什么onload事件永远不会在以下代码段中触发？

var img = new Image()
img.onload = function() {
  alert("ok");
}
var svg = '<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>'

img.src = 'data:image/svg+xml;base64,'+ btoa(svg);

链接到jsfiddle：https://jsfiddle.net/venmmn3b/1/

Answer 1

因为不行 -

在svg字符串中缺少引号
图像触发错误而非负载处理程序

sed -i.bak "s/^$proxy/d" file

我的事件试图添加有效的svg：

var img = new Image()
img.onload = function() {
  console.log("ok");
}
img.onerror = function(e) {
  console.log("Not ok",e);
}
var svg = '<svg></svg>';
img.src = 'data:image/svg+xml;base64,'+ btoa(svg);

Answer 2

感谢Terje的回答，我设法使其正常工作。我仍然必须按照this tutorial中所述创建Blob和对象URL。

    // SVG Containing version and xmlns attributes as Terje stated
    const my_svg = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>`; 
    const img = document.createElement('img');

    const blob = new Blob([my_svg], { type: 'image/svg+xml;charset=utf-8' })
    const URLSrc = URL.createObjectURL(blob);

    img.onload = function () {
      console.log('Image Loaded')
    }

    img.src = URLSrc;

Answer 3

您在

行中缺少引号

 var svg = '<svg></svg>';.

并且当我将图片来源保持为＆＃34; http://pierre.chachatelier.fr/programmation/images/mozodojo-original-image.jpg＆＃34;时它也在工作。所以我认为你的形象只有一些问题。

Answer 4

尝试将xmlns和version属性添加到svg。

示例：<svg version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>

设置源时未调用图像onload

4 个答案: