Як відобразити локальні зображення в Chrome за допомогою протоколу file: //?

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

Я пам'ятаю, як це робив за допомогою IE, але не можу пригадати, як! Деякі надійні налаштування, я думаю ...

ви можете конвертувати зображення в код 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=='>

Оскільки ви згадали про "Chrome", ви можете використовувати розширення Chrome для цього, щоб дозволити локальний доступ до своїх файлів.

Виконайте такі дії:

1) У локальній папці, де розміщені ваші зображення, створіть цей файл під назвою 'manifest.json' та введіть це:

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

2) Помістіть це ваш хроновий адресний рядок: chrome: // extensions /

3) Переконайтесь, що прапорець "Режим для розробника" (угорі праворуч)

4) Натисніть кнопку "Завантажити розпаковане розширення"

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

6) Тепер у списку має бути вказано розширення "Exposer File" та встановити галочку проти "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)" поруч із розширенням.

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

Ви можете змінити це за допомогою LocalLinks ( для Firefox ), але він працюватиме лише у вашій власній машині.

у Chrome це виглядає приблизно так

file:///C:/sample.txt

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

Існує різні способи запуску веб-сервера: 1. Розширення для браузера "Веб-сервер для Chrome" з визначеною папкою https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

2. Якщо у вас є python, тоді запустіть вбудований http-сервер у вибраній папці

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

3. Використовуйте готовий для виробництва сервер, наприклад nginx , apache

У моєму випадку мені потрібно було лише побачити, як виглядатиме одна невелика зміна зображення різних розмірів. Найпростіше було зберегти як ... повну веб-сторінку на робочому столі, а потім відкрити її. Я перевіряю та редагую зображення src.

Гаразд, ви не можете просто дозволити комусь іншому отримати доступ до вашої локальної файлової системи! Вам знадобиться серверний сервіс, як Apache, нехай ваш комп'ютер працює 24 години на день, переконайтеся, що він не перегрівається, дбає про хорошу безпеку та багато іншого, щоб зробити це навіть можливим. А оскільки адміністрування сервера є дорогим та трудомістким, більшість людей дозволяють господарям професіонала приймати наші речі для нас (Webhosting).

На закінчення, якщо ви не хочете запускати власний сервер, набагато простіше просто завантажити його на свій веб-хостинг.