☰

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

tag-icon • tag-icon google-chrome url pictures
Как отображать локальные изображения в Chrome с использованием протокола file://?

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

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

решение1

Вы можете преобразовать изображение в код base-64, например, с помощью "https://www.base64-image.de/" и скопируйте результат в браузер! Нравится:

<img width='16' height='16'  src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAApklEQVQ4jWP8//8/Ay5Q4s6GU7Jn5y9GBgYGBiacuokELKTYSpQByKB68UkMMUExQ0ZkPsVeYEQPREZGRpK8gOGCdy/PwTEyH8ZGF8MbBgwMDAxC4kZ4xfAaALMFGfz//5+6gYjXBS+fXUHhaxjEMqKrQXGBglU8SgyIS+mgYHR5DAPIAYz////HavL5DQVwtmHABAyND44tZGRgwBMG2DRhAxR7AQBhgT3yD6eBRwAAAABJRU5ErkJggg=='>

решение2

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

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

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

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

  1. Введите это в адресную строку Chrome: chrome://extensions/

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

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

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

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

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

  7. Теперь в HTML-коде вы можете получить доступ к файлу, изменив «EXTERNSION_ID» на любой идентификатор, сгенерированный вашим расширением:

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

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

В теге «img» вы не указываете исходную папку, она является относительной по отношению к этой папке, поэтому нужно указать только подпапки.

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

решение3

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

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

решение4

Если вы хотите протестировать локальное изображение на работающем сайте, вы можете запустить локальный веб-сервер и указать 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, то запустите Embeddedhttp-серверв выбранной папке

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

  2. Используйте готовый к производству сервер, напримерnginx,апач

Связанный контент