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

Since you mentioned 'Chrome', you could use Chrome extensions to do this, to enable local access to your files.

Follow these steps:

1) In the local folder where your image(s) are, create this file called 'manifest.json' and enter this:

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

2) Put this is your chrome address bar: chrome://extensions/

3) Make sure 'Developer mode' is checked (Top right of page)

4) Click the 'Load Unpacked Extension' button

5) Navigate to the local folder where the image(s) and the manifest.json file is, click ok

6) The extension 'File Exposer' should now be listed in the list, and have a check mark against 'Enabled'. If the folder is on a network drive or other slow drive or has lots of files in, it could take 10-20 seconds or more to appear in the list.

7) Note the 'ID' string that has been associated with your extension. This is the EXTENSION_ID

8) Now in your HTML you can access the file with the following, changing the 'EXTERNSION_ID' to whatever ID your extension generated:

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

Note, that the *.jpg is recursive and it will automatically match files in the specified folder and all sub folders, you dont need to specify for each sub folder. Also note, its Case Sensitive.

In the 'img' tag you dont specify the original folder, its relative from that folder, so only sub folders need to be specified.

If you modify the manifest.json file, you will need to click the 'Reload (Ctrl+R)' link next to the extension.

Нелокальные веб-страницы не могут получить доступ к локальным файлам в 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 часа в сутки, следить за тем, чтобы он не перегревался, заботиться о хорошей безопасности и многое другое, чтобы сделать это возможным. А поскольку администрирование сервера стоит дорого и отнимает много времени, большинство людей позволяют профессионалам размещать наши материалы для нас (веб-хостинг).

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