㊙️ 控制台的红色字体和图片

用户4793865

发布于 2023-01-12 14:08:52

1.4K00

代码可运行

文章被收录于专栏：前端小菜鸡yym前端小菜鸡yym

运行总次数：0

代码可运行

开始

当你百度东西的时候，打开浏览的控制台。可以看到什么？对是他的招聘信息。并且你会惊奇的发现。居然有红色的字。这是怎么做到的？那么今天我们来学习一下。并且，我们也实现一下控制台打印图片。

红色字

注意是`号， %c后跟着输出的内容。

console.log(`%c 欢迎入职`,'color:red')

很简单。但是这不是重点。下面我们看一下如何打印图片。

图片

先定义一个图片地址

  let imgUrl = 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg'

这里用到了Image()，我们一会再说。onload是图片加载完成后。我们在onload内部打印了一下1111，说明这个图片已经加载了。如果没有加载到是会报错的。

  function consoleImg(url){
                let myImg = new Image();
                myImg.onload = function(){
                    console.log(1111)
                   
                }
                // 给mtImg添加路径
                myImg.src = url
            }
  consoleImg(imgUrl)

在onload内部打印图片，因为样式比较多，所以我们声明一个style变量，注意用的是`号。

 function consoleImg(url){
                let myImg = new Image();
                myImg.onload = function(){
                    const style =`
                        background-image:url(${url});
                        background-size:100px 100px;
                        background-repeat:no-repeat;
                     
                    `                    
                    console.log(`%c ` ,style)
              
                }
                myImg.src = url
            }
  consoleImg(imgUrl)

现在可以看到有图片了，虽然我们给了background-siz属性，但依旧很小。

因为这里需要font-size属性。

 function consoleImg(url){
                let myImg = new Image();
                myImg.onload = function(){
                    const style =`
                        background-image:url(${url});
                        background-size:100px 100px;
                        background-repeat:no-repeat;
                        font-size:100px; 
                    `                    
                    console.log(`%c ` ,style)
              
                }
                myImg.src = url
            }
  consoleImg(imgUrl)

图片已经变大了，但是那显示的不完全。

需要通过padding来调整距离

 function consoleImg(url){
                let myImg = new Image();
                myImg.onload = function(){
                    const style =`
                        background-image:url(${url});
                        background-size:100px 100px;
                        background-repeat:no-repeat;
                        font-size:100px; 
                        padding-right:100px;
                    `                    
                    console.log(`%c ` ,style)
              
                }
                myImg.src = url
            }
  consoleImg(imgUrl)

如下，图片就出现了。

后来我就好奇，试了一下，本地图片是否可以。虽然在onload中读到了图片，但是依旧渲染不到控制台中。

Image

最后说一下，Image()。

建立图像对象： 图像对象名称=new Image([宽度],[高度])\

属性：

  <div id="ss"></div>
        <script>
            let imgUrl = 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg'
            // let imgUrl = 'im.jpg'
            function consoleImg(url){
                let myImg = new Image();
                myImg.onload = function(){
                    console.log(1111)
                    const style =`background-image:url(${url});
                         background-size:100px 100px;
                        background-repeat:no-repeat;
                        font-size:100px;
                        padding-right:100px;
                    `
                    // console.log(`%c 666`,'color:#f00')
                    console.log(`%c ` ,style)
                
                }
                myImg.src = url
                myImg.border= '6px solid'
                myImg.height = 300
                // 追加元素
                document.getElementById('ss').appendChild(myImg)
            }
            consoleImg(imgUrl)

我们使用 document.getElementById()方法将我们的myImg添加到id为ss的div中。