Как вывести локальное изображение на консоль? - PullRequest
0 голосов
/ 13 сентября 2018

Я только что заметил, что 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)

1 Ответ

0 голосов
/ 13 сентября 2018

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...