设置源时不调用图像加载 [英] Image onload not called when setting source
本文介绍了设置源时不调用图像加载的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
为什么在以下代码段中从未触发 onload 事件?
Why is the onload event never fired in following snippet?
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/>
Link to jsfiddle: https://jsfiddle.net/venmmn3b/1/
推荐答案
因为不行 -
- 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);
我什至尝试添加有效的 svg:
I even tried to add valid svg:
var img = new Image()
img.onload = function() {
console.log("ok");
}
img.onerror = function(e) {
console.log("Not ok",e);
}
img.src = 'data:image/svg+xml;utf8,<svg><text font-size="68" font-weight="bold" font-family="DejaVu Sans" y="52" x="4" transform="scale(.8,1.7)"><tspan fill="#248">W3</tspan>C</text> <path fill="none" stroke="#490" stroke-width="12" d="m138 66 20 20 30-74"/></svg>';
这篇关于设置源时不调用图像加载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文