Добавить картинку в console.log javascript

В браузерах, при открытии консоли можно добавить картинку. Например, добавить некую пасхалку на сайт можно следующим образом.

В заголовках страницы добавляем код:

console.log('%c ', 'font-size:600px; background:url(https://pics.me.me/codeit-google-until-youfinda-stackoverflow-answerwith-code-to-copy-paste-34126823.png) no-repeat;');

Где мы прописываем ссылку на картинку и размер через параметр font-size:600px. Это потому, что в данном коже мы просто увеличиваем текст.

Есть более лучшее решение:

<script type="text/javascript">
(function(url) {
var image = new Image();
image.onload = function() {
var style = [
'font-size: 1px;',
'line-height: ' + this.height + 'px;',
'padding: ' + this.height * .0 + 'px ' + this.width * .5 + 'px;',
'background-size: ' + this.width + 'px ' + this.height + 'px;',
'background: url('+ url +');'
].join(' ');
console.log("%c ", style);
};
image.src = url;
})('https://lexblog.org/wp-content/uploads/2019/09/vyydi-otsyuda-razboynik-3.jpg');
</script>

С этим кодом результат будет лучше, так как будет видна только картинка без всяких отступов, в отличии от предыдущего кода.

Удачи 🙂

3 комментария

  1. Перезвоните мне пожалуйста по номеру. 8 (950) 000-06-64 Виктор.

    • Здравствуйте, Виктор. К сожалению у нас нет такой возможности.
      Если у Вас есть какие-либо вопросы — пишите на почту. Контактный Email указан по ссылке: https://lexblog.org/about/

  2. Перезвоните мне пожалуйста по номеру 8 (904) 332-62-08 Алексей

Оставьте ответ