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

Я только что заметил, что javascript with css делает возможным для отображения разных стилей в консоли разработчика. Конечно, это также позволяет отображать изображения в консоли.

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

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

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

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


Примечание: пожалуйста, откройте свой консоль браузера, чтобы увидеть фрагмент ниже: (или найти его здесь: 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 <b>developer console</b>.

Вот как это выглядит в сафари:

im

Это рабочий отлично: ('http://www.personal.psu.edu/users//w/z/wzz5072/mini.jpg');

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

Возможный дубликат Доступ к локальным файлам с помощью javascript

Serg Chernata 13.09.2018 21:30

К вашему сведению, ваш пример не работает в Chrome или Firefox.

Turnip 13.09.2018 21:31

Текущая версия - 69.0.3497.92. Как / почему вы все еще используете 54? Выпущен в 2016 году.

Turnip 13.09.2018 21:37
0
3
2 175
2

Ответы 2

Браузеры не разрешают такой доступ к локальным файлам в целях безопасности. Вам понадобится веб-сервер, работающий на локальном хосте, чтобы это работало так, как вы намереваетесь.

Вы можете использовать изображения в кодировке Base64.

enter image description here

var º = "%c";
var consoleNormal     = "font-family: sans-serif";
var consoleBold       = "font-family: sans-serif;" +
                        "font-weight: bold";
var consoleCode       = "background: #EEEEF6;" +
                        "border: 1px solid #B2B0C1;" +
                        "border-radius: 7px;" +
                        "padding: 2px 8px 3px;" +
                        "color: #5F5F5F;" +
                        "line-height: 22px;" +
                        "box-shadow: 0px 0px 1px 1px rgba(178,176,193,0.3)";
var consoleBackground = "background-image: url('data:image/png;base64,iVBO" +
                        "Rw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQ" +
                        "VQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAA" +
                        "BJRU5ErkJggg==')";


console.info(º+"Example: Normal", consoleNormal);
console.info(º+"Example: Bold", consoleBold);
console.info(º+"Example: Code", consoleCode);
console.info(º+"Example: Background", consoleBackground);

Другие вопросы по теме