chrome console.log图片（新）

在以前，控制台是支持直接的图片url作为背景进行输出的。
比如我之前的博客console里用的就是：

console.log("%c  滑滑稽稽， 可可爱爱", "line-height: 220px; width: 200px; display: inline-block;background: url(https://images.cnblogs.com/cnblogs_com/noah227/1544062/o_2004041650283a1db785b870d682694a15f13c506d09.gif) 0 0 no-repeat; background-size: 100px  100px");

但是后来版本更新后，这种方案就不行了。经查询，替代的方案是把图片转为data image使用

简单处理了下，就是以下这个样子（可以打开console查看效果~）

const url = "https://images.cnblogs.com/cnblogs_com/noah227/1544062/o_2004041650283a1db785b870d682694a15f13c506d09.gif"
const x = new XMLHttpRequest()
x.responseType = "blob"
x.open("get", url)
x.send()
x.onload = () => {
    const fr = new FileReader()
    fr.onload = () => {
        console.log("%c  滑滑稽稽， 可可爱爱", `line-height: 220px; width: 200px; display: inline-block;background: url(${fr.result}) 0 0 no-repeat; background-size: 100px  100px`);
    }
    fr.readAsDataURL(x.response)
}

相关参考

• console.image:Doesn't work in Chrome any more
  标签：console,log,chrome,100px,url,background,com
  From： https://www.cnblogs.com/noah227/p/18103387