Как отобразить локальные изображения, размещенные на клиентском компьютере, на веб-страницах HTML

Question

Как отобразить локальные изображения, размещенные на клиентском компьютере, на веб-страницах HTML, размещенных на веб-сервере

У меня есть несколько изображений, помещенных в папку C:/Images, поэтому путь должен быть file:///C:/Images/1.jpg для image 1.jpg

Я использую код <img src="file:///C:/Images/1.jpg" /> в sample.html

sample.html при размещении на локальном жестком диске показывает 1.jpg, но когда я помещаю файл sample.html на веб-сервер, он не отображает изображение, помещенное на мой диск C:

Есть ли способ показать изображения, размещенные на клиентском жестком диске, с веб-страницы HTML, размещенной на веб-сервере?

Я пробовал даже iframe, но не повезло.

РЕДАКТИРОВАТЬ: Могу ли я показать эти изображения, используя usercript или аддон Firefox? Я на самом деле реализую эту вещь в своем аддоне Firefox заставки.

Answer 1

Веб-страницам не разрешен доступ к файлам: /// URL по соображениям безопасности, здесь нет никакого способа обойти это. Однако, если вы делаете те же файлы доступными по другому протоколу - это может сработать. Например, вы можете поместить следующую строку в файл chrome.manifest вашего дополнения:

файл myaddon ресурса: /// C: / Images

Это создаст псевдоним протокола ресурса , указывающий на этот каталог - и протокол ресурса может использоваться веб-страницами. Это означает, что страницы смогут использовать изображение C:\Images\1.jpg как resource://myaddon/1.jpg.

Вы также можете динамически добавлять псевдонимы протокола ресурса . Просто убедитесь, что вы делаете доступными только изображения, а не все содержимое диска - в противном случае вы можете открыть дыру в безопасности.

Answer 2

Используйте File API, который работает во всех браузерах, кроме IE.

Простой пример этого будет:

function ShowImage(filepath){
    var reader=new FileReader(); // File API object
    reader.onload=function(event){
        document.getElementById('myimage').src = event.target.result;
    }
    reader.readAsDataURL(filepath);
}

Answer 3

атрибут src всегда находится в контексте сервера, который обслуживает содержимое HTML. Я не думаю, что есть способ обойти это.

Так в вашем примере <img src="file:///C:/Images/1.jpg" />, если хост - ip 1.1.1.1, а клиент - ip 2.2.2.2

тогда src будет указывать на 1.1.1.1\file://C:/images/1.jpg <- это пример ненастоящего протокола. </em>