chrome console.log图片（新）

---- 更新 ----
现可用包 @cynario/console.image @npm，你也可以像下面这样直接从cdn引入
import console from "https://cdn.jsdelivr.net/npm/@cynario/console.image/dist/index.js"
console.image("https://avatars.githubusercontent.com/u/0?v=4", {width: 80})

以下是解决该问题的一些思路历程和要点解析，感兴趣的可以看下~

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

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

但是后来chrome版本更新后（大概在90-100版本之间的某个版本吧），这种方案就不行了。
经查询，替代的方案是把图片转为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 ", `font-size: 0; padding: 50px; background: url(${fr.result}) 0 0 no-repeat; background-size: 100%`);
         console.log("滑滑稽稽， 可可爱爱")
    }
    fr.readAsDataURL(x.response)
}

要点注明：

输出图像的容器尺寸可以由文本内容、line-height以及padding来撑起来
在不用文本驱动容器尺寸时，%c 后面至少要有一个空格
推荐使用padding撑起容器，例如需要输出尺寸为400x400的图片，那么只需要设置 padding: 200px 即可
- 要注意文本内容也会带来的尺寸影响
- 由于输出至少有一个空格，会占用宽度，可以设置 font-size: 0 以消除影响

彼时今日

chrome console.log图片（新）

相关参考

公告