Как отобразить локальные изображения в Chrome, используя протокол file: //?

23

Я хотел бы иметь возможность указать локальный путь к файлу для изображения на веб-странице, доставленной через http с помощью Chrome - возможно ли это?

Я помню, как делал это с помощью IE, но не помню как! Некоторые надежные настройки, я думаю ...

google-chrome url pictures JSH
источник

Ответы:

14

Вы можете преобразовать изображение в код base-64, например, с помощью « http://duri.me/ » и скопировать результат в браузер! Подобно:

<img width='16' height='16'  src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAApklEQVQ4jWP8//8/Ay5Q4s6GU7Jn5y9GBgYGBiacuokELKTYSpQByKB68UkMMUExQ0ZkPsVeYEQPREZGRpK8gOGCdy/PwTEyH8ZGF8MbBgwMDAxC4kZ4xfAaALMFGfz//5+6gYjXBS+fXUHhaxjEMqKrQXGBglU8SgyIS+mgYHR5DAPIAYz////HavL5DQVwtmHABAyND44tZGRgwBMG2DRhAxR7AQBhgT3yD6eBRwAAAABJRU5ErkJggg=='>
Диого Сид
источник
7
Эта информация может кому-то пригодиться, но я думаю, что на самом деле она не отвечает на этот вопрос.
G-Man говорит: «Восстановите Монику»
12

Поскольку вы упомянули «Chrome», вы можете использовать для этого расширения Chrome, чтобы разрешить локальный доступ к вашим файлам.

Следуй этим шагам:

1) В локальной папке, где находятся ваши изображения, создайте этот файл с именем manifest.json и введите его:

{
  "name": "File Exposer",
  "manifest_version": 2,
  "version": "1.0",
  "web_accessible_resources": ["*.jpg","*.JPG"]
}

2) Поместите это ваша адресная строка chrome: chrome: // extensions /

3) Убедитесь, что «Режим разработчика» отмечен (вверху справа на странице)

4) Нажмите кнопку «Загрузить распакованное расширение».

5) Перейдите в локальную папку, в которой находятся изображения и файл manifest.json, нажмите кнопку ОК.

6) Расширение «File Exposer» теперь должно быть указано в списке и иметь галочку напротив «Enabled». Если папка находится на сетевом диске или другом медленном диске или содержит много файлов, отображение в списке может занять 10-20 секунд или более.

7) Обратите внимание на строку «ID», которая была связана с вашим расширением. Это EXTENSION_ID

8) Теперь в вашем HTML вы можете получить доступ к файлу с помощью следующего, изменив 'EXTERNSION_ID' на любой идентификатор, сгенерированный вашим расширением:

<img src='chrome-extension://EXTENSION_ID/example1.jpg'>

Обратите внимание, что * .jpg является рекурсивным и автоматически сопоставляет файлы в указанной папке и всех подпапках, указывать их не нужно для каждой подпапки. Также обратите внимание, его регистр чувствителен.

В теге 'img' вы не указываете исходную папку, ее родственник из этой папки, поэтому необходимо указывать только подпапки.

Если вы измените файл manifest.json, вам нужно будет щелкнуть ссылку «Обновить (Ctrl + R)» рядом с расширением.

Роб Донован
источник
8

Нелокальные веб-страницы не могут получить доступ к локальным файлам в Chrome или любом современном веб-браузере.

Вы можете переопределить это, используя LocalLinks ( для Firefox ), но это будет работать только на вашем собственном компьютере.

grawity
источник
2
не будет работать для изображений
Willem D'Haeseleer
Я думаю, что Chrome тупой, я пытался на about:blankстранице, и это не позволяло, я устал открывать локальный файл HTML, и он работал, даже для изображений, несмотря на то, что сказал @ WillemD'Haeseleer. Мой код был такой:drawing = new Image(); drawing.src = "C:/Users/S/Videos/net.png";
Шаян
2

в Chrome это выглядит так 

file:///C:/sample.txt
KutscheraIT
источник
Я делаю что-то вроде этого, размещаюсь в сети, но смотрю на локальные файлы пользователей .... <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" " w3.org/TR /xhtml1/DTD/xhtml1-strict.dtd "> <html xmlns =" w3.org/1999/xhtml "> <head> <meta http-lim =" Content-Type "content =" text / html; charset = utf -8 "/> <title> пример </ title> </ head> <body> <img src =" file: /// c: /graphics/image.jpg "height =" 200px "width =" 200px "/ > <h1> Добро пожаловать </ h1> <p> Привет, мир! </ p> </ body> </ html>
JSH
1
Я только что попробовал .html и .jpg файлы с обозначением file: ///, оба были отображены правильно. Не могли бы вы опубликовать скриншот, который показывает адресную строку и часть содержимого?
KutscheraIT
попробуйте jsh.learningict.net - очевидно, изображение, которого у вас не будет, но код показывает вам идею того, что мне нужно
JSH
Я могу только догадываться, что вы имеете в виду тег изображения, который также отлично работает, когда я заменяю src на <img src = "file: /// c: \ test.jpg" height = "200px" width = "200px" > c: \ test.jpg является допустимым JPG в этом пути и показывает хорошо.
KutscheraIT
интересно, если это оскс вещь? ссылка src прекрасно работает в адресной строке Chrome, но не в HTML-коде
JSH
2

Если вы хотите протестировать локальное изображение на действующем сайте, вы можете запустить локальный веб-сервер и установить URL-адрес, например http://127.0.0.1:8123/img.jpg, на странице с помощью DevTools.

Существуют различные способы запуска веб-сервера: 1. Расширение для браузера «Веб-сервер для Chrome» с определенной папкой https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

  1. Если у вас есть Python, запустите встроенный http-сервер в выбранной папке

    python3 -m http.server 8123 # версия python 3
    python -m SimpleHTTPServer 8123 # версия python 2

  2. Используйте готовый к работе сервер, такой как nginx , apache

koxt
источник
0

В моем случае мне нужно было только посмотреть, как будет выглядеть одно небольшое изменение изображения в разных адаптивных размерах. Проще всего было сохранить как ... полную веб-страницу на рабочем столе, а затем открыть ее. Я проверяю и редактирую изображение src.

changokun
источник
Похоже, это совсем не то, о чем спрашивал ОП, даже не связанный. Пожалуйста, внимательно прочитайте вопросы и не отвечайте и не комментируйте, если у вас нет соответствующей информации для добавления.
music2myear
1
Но это то, что я искал
Сэмюэль Томпсон
-1

Хорошо, вы не можете просто позволить кому-то другому получить доступ к вашей локальной файловой системе! Вам понадобится серверная служба, такая как Apache, позволяющая вашему компьютеру работать 24 часа в сутки, следить за тем, чтобы он не перегревался, заботиться о хорошей безопасности и многое другое, чтобы сделать это возможным. А поскольку администрирование сервера стоит дорого и отнимает много времени, большинство людей позволяют профессионалам размещать наши материалы для нас (веб-хостинг).

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

user759576
источник
2
Вопрос не в том, чтобы дать интернету доступ к файлам в локальной системе.
ксеноид