Почему я не могу сделать <img src = «C: /localfile.jpg»>?


96

Он работает, если html-файл является локальным (на моем диске C), но не, если html-файл находится на сервере, а файл изображения является локальным. Почему это?

Возможные обходные пути?


3
Могу я спросить, зачем вам это нужно?
Boris Callens

2
@BorisCallens Например, я мог бы захотеть протестировать изменение изображения на моем промежуточном веб-сайте, когда у меня есть новое изображение на моем собственном компьютере, и я не хочу проходить весь процесс загрузки на промежуточный этап. Похоже, единственный способ сделать это - изменить изображение в среде разработки, а не ставить его в любом случае.
xji

Это также отличный способ подшутить над вашими менее технически компетентными знакомыми, заставив их подумать, что вы взломали веб-сайт.
0112

Другой способ сделать это быстро - загрузить файл, например, диск Google или что-то еще, затем скопировать URL-адрес изображения и вставить его внутрьsrc=""
0112

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

Ответы:


64

Было бы уязвимостью безопасности, если бы клиент мог запросить файлы локальной файловой системы, а затем использовать JavaScript, чтобы выяснить, что в них.

Единственный способ обойти это - создать расширение в браузере. Расширения Firefox и расширения IE могут получать доступ к локальным ресурсам. Chrome гораздо более ограничен.


1
тем не менее, flash может получить доступ ко всему, что выберет пользователь, даже в Chrome
Хавьер

1
Проголосовал за это, потому что он ответил на вопрос "почему" и дал несколько способов обойти это. Что я, скорее всего, сделаю (и я знаю, что не предоставил много информации) - это создать локальный веб-сервер для обслуживания локальных изображений. Таким образом браузер сможет их отображать.
PeterV

1
Flash может получить доступ к локальным ресурсам только с установленным файлом политики, иначе он перейдет в локальный режим и будет ограничен другими способами.
Bjorn

2
Эта параноидальная безопасность - всего лишь помеха. Вы МОЖЕТЕ загружать пользовательские файлы на сервер с помощью AJAX из формы с полем <input type = file>, но если вы хотите быть вежливым с пользователем и показать предварительный просмотр, вы ДОЛЖНЫ выполнить поездку туда и обратно и загрузить файл в сервер в первую очередь. Как это безопаснее, чем создание изображения предварительного просмотра локально?
MKaama

2
Для того, чтобы показать пользователю красивое превью, ВЫ ДОЛЖНЫ ПОВТОРИТЬСЯ К СЕРВЕРУ. Это возможно с AJAX. Как загрузка файла на сервер в первую очередь более безопасна, чем создание изображения предварительного просмотра локально? Параноидальная безопасность создает только беспокойство, но не решает никаких проблем.
MKaama


27

Браузерам не разрешен доступ к локальной файловой системе, если вы не обращаетесь к локальной html-странице. Вы должны куда-нибудь загрузить изображение. Если он находится в том же каталоге, что и файл html, вы можете использовать<img src="localfile.jpg"/>


Я пытался добиться того же, используя абсолютный путь «/localfile.jpg», но, похоже, браузер воспринимает его как «веб-изображение» и не находит его. Благодарность!
jmojico


6

Честно говоря, проще всего было добавить на сервер файловый хостинг.

  • Откройте IIS

  • Добавить виртуальный каталог на веб-сайт по умолчанию

    • виртуальный путь будет тем, что вы хотите просмотреть в браузере. Поэтому, если вы выберете « serverName / images, вы сможете перейти к нему, перейдя по адресу http: // serverName / images.
    • Затем добавьте физический путь на диске C:
  • Добавьте соответствующие разрешения в папку на диске C: для «NETWORK SERVICE» и «IIS AppPool \ DefaultAppPool»

  • Обновить веб-сайт по умолчанию

  • И вы сделали. Теперь вы можете перейти к любому изображению в этой папке, перейдя по адресу http: //yourServerName/whateverYourFolderNameIs/yourImage.jpg и использовать этот URL-адрес в своем img src.

Надеюсь, это кому-то поможет


3

IE 9: если вы хотите, чтобы пользователь взглянул на изображение перед тем, как отправить его на сервер: пользователь должен ДОБАВИТЬ веб-сайт в «список доверенных веб-сайтов».


3

мы можем использовать javascript FileReader () и функцию readAsDataURL (fileContent) для отображения файла локального диска / папки. Свяжите событие изменения с изображением, затем вызовите функцию javascript showpreview. Попробуй это -

<!doctype html>
<html>

<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;'>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
    <title></title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript">
    function showpreview(e) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $("#previewImage").attr("src", e.target.result);
        }
        //Imagepath.files[0] is blob type
        reader.readAsDataURL(e.files[0]);
    }
    </script>
</head>
<body >
    <div>
    <input type="file" name="fileupload" value="fileupload" id="fileupload" onchange='showpreview(this)'>
    </div>
    <div>
        &nbsp;
    </div>
    <div>
    <img width="50%" id="previewImage">
    </div>
</body>
</html>

Chrome выдает ошибку в консоли «Не разрешено загружать локальный ресурс».
raosaeedali

1
@raosaeedali Извините за поздний ответ. Если мы хотим отображать изображения с локального диска напрямую в теге img HTML-страницы, нам нужно указать относительный путь. Другое решение - мы получаем путь к файлу из файла входного типа и назначаем источник файла тегу img, для этого я обновил код.
Равиндра Вайраги

@RavindraVairagi есть ли способ вывести изображение без выбора файла в проводнике? Я попытался использовать ваш скрипт и не получил ошибку «Не разрешено загружать локальный ресурс», но я хочу найти способ напрямую распечатать изображение, если оно существует ...
Bandoleras

2

Если не считать замечание Ньютанга о правилах безопасности, как вы узнаете, что у любого, кто просматривает вашу страницу, будут правильные изображения c:\localfile.jpg? Вы не можете. Даже если вы думаете, что можете, вы не можете. Во-первых, он предполагает среду Windows.


Если только ты не сможешь. Я знаю, что я не особо привел контекст в вопросе :) Но в этом случае мы действительно можем знать.
PeterV

5
Что, если он планирует иметь только 10 пользователей в офисе, у каждого из которых есть среда Windows и правильные изображения в c: \ localfile.jpg. С этой целью ... он сможет не только знать, что есть правильные изображения, но и управлять ими.
Наска

Этот вопрос верен, потому что он требует среды Windows, обслуживающей очень ограниченную аудиторию. Например, я столкнулся с той же проблемой, когда проектировал веб-сервер на базе Arduino, где единственным клиентом был ПК с Windows в той же локальной сети, что и сервер Arduino. Arduino слишком медленно передавал изображения клиенту, поэтому мне пришлось хранить изображения на самом клиентском компьютере.
PrashanD

1

Я вижу две возможности для того, что вы пытаетесь сделать:

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

  2. Вы хотите, чтобы он загружал его с компьютера, просматривающего страницу?

Вариант 1 просто не имеет смысла :)

Вариант 2 - это брешь в безопасности, браузер запрещает веб-странице (обслуживаемой из Интернета) загружать контент на компьютер зрителя.

Кайл Хадсон сказал вам, что вам нужно сделать, но это настолько элементарно, что мне трудно поверить, что это все, что вы хотите сделать.


1

если вы используете браузер Google Chrome, вы можете использовать это так

<img src="E://bulbpro/pic_bulboff.gif"   width="150px" height="200px">

Но если вы используете Mozila Firefox, вам нужно добавить «файл» ex.

<img src="file:E://bulbpro/pic_bulboff.gif"   width="150px" height="200px">

3
Это не работает для меня в Chrome, но работает в IE?
осьминог,

0

Вам также необходимо загрузить изображение, а затем ссылку на изображение на сервере.


0

как насчет того, чтобы изображение было выбрано пользователем? Использовать тег input: file, а затем, после выбора изображения, показывать его на клиентской веб-странице? Это выполнимо для большинства вещей. Прямо сейчас я пытаюсь заставить его работать для IE, но, как и во всех продуктах Microsoft, это вилка кластера ().


0

Если вы развертываете локальный веб-сайт только для себя или определенных клиентов, вы можете обойти это, запустив mklink /D MyImages "C:/MyImages"корневой каталог веб-сайта в качестве администратора в cmd. Затем в html, do <img src="MyImages/whatever.jpg">и символическая ссылка, установленная mklink, соединит относительную ссылку src со ссылкой на вашем диске C. Он решил эту проблему для меня, поэтому может помочь другим, кто задается этим вопросом.

(Очевидно, это не будет работать для общедоступных веб-сайтов, поскольку вы не можете легко запускать команды cmd на компьютерах людей)


0

Я перепробовал множество техник и наконец нашел один на стороне C # и стороне JS. Вы не можете указать физический путь к атрибуту src, но можете указать строку base64 как тег src to Img. Давайте посмотрим на приведенный ниже пример кода C #.

<asp:Image ID="imgEvid" src="#" runat="server" Height="99px"/>

Код C #

 if (File.Exists(filepath)
                            {
                                byte[] imageArray = System.IO.File.ReadAllBytes(filepath);
                                string base64ImageRepresentation = Convert.ToBase64String(imageArray);
                                var val = $"data: image/png; base64,{base64ImageRepresentation}";
                                imgEvid.Attributes.Add("src", val);
                            }

Надеюсь, это поможет


0

начинается file:///и заканчивается filenameдолжно работать:

<img src="file:///C:/Users/91860/Desktop/snow.jpg" alt="Snow" style="width:100%;">
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.