Как отобразить локальное изображение на консоли? ⇐ CSS

[Anonymous]

Я только что заметил, что Javascript с CSS позволяет отображать разные стили в консоли разработчика. Конечно, это также позволяет отображать изображения в консоли.
Поскольку я могу очень хорошо использовать эту функцию для своего проекта, я хотел ее попробовать. напрямую. Безуспешно.

С помощью приведенного ниже кода (который у меня есть из этого сообщения: https://stackoverflow.com/a/26286167) я могу выводить изображения с URL-адресом (т. е. изображениями в Интернете).

Но для локальных изображений в Safari это пока не работает.

Кто-нибудь знает, почему он не работает с локальными изображениями, а с URL-адресами? И знает ли кто-нибудь обходной путь, позволяющий по-прежнему отображать локальные изображения в консоли?



Примечание< /strong>: откройте консоль браузера для просмотра приведенного ниже фрагмента: (или найдите его здесь: https://jsfiddle.net/7wbnsp9u/3/)

Код: Выделить всё

(function(url) {
var image = new Image();
image.onload = function() {
console.log('%c', [
'font-size: 1px;',
'line-height: ' + this.height + 'px;',
'padding: ' + this.height * .5 + 'px ' + this.width * .5 + 'px;',
'background-size: ' + this.width + 'px ' + this.height + 'px;',
'background: url(' + url + ');'
].join(' '));
};
image.src = url;
})('http://www.personal.psu.edu/users//w/z/wzz5072/mini.jpg');

Код: Выделить всё

> Please open your developer console[/b].< /code>
< /div>
< /div>
< /p>

Это то, как он выглядит в Safari: < / p>

[img]https://i.stack.imgur.com/aH5hD.png[/img]
Это работает [b]отлично[/b]:('http://www.personal.psu.edu/users//w/z/wzz5072/mini.jpg');

... а это нет: ('mini.jpg'); = (/Users /xy/project/mini.jpg)

Подробнее здесь: https://stackoverflow.com/questions/523 ... to-console