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

Question 1

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

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

Question 2

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

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

Question 3

не следует ли вам использовать «file: // C: /localfile.jpg» вместо «C: /localfile.jpg»?

Question 4

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

Question 5

C:не является распознанной схемой URI. Попробуйте file://c|/...вместо этого.

Question 6

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

Откройте IIS
Добавить виртуальный каталог на веб-сайт по умолчанию
- виртуальный путь будет тем, что вы хотите просмотреть в браузере. Поэтому, если вы выберете « serverName / images, вы сможете перейти к нему, перейдя по адресу http: // serverName / images.
- Затем добавьте физический путь на диске C:
Добавьте соответствующие разрешения в папку на диске C: для «NETWORK SERVICE» и «IIS AppPool \ DefaultAppPool»
Обновить веб-сайт по умолчанию
И вы сделали. Теперь вы можете перейти к любому изображению в этой папке, перейдя по адресу http: //yourServerName/whateverYourFolderNameIs/yourImage.jpg и использовать этот URL-адрес в своем img src.

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

Question 7

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

Question 8

мы можем использовать 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>

Question 9

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

Question 10

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

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

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

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

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

Question 11

если вы используете браузер 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">

Question 12

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

Question 13

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

Question 14

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

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

Question 15

Я перепробовал множество техник и наконец нашел один на стороне 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);
                            }

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

Question 16

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

<img src="file:///C:/Users/91860/Desktop/snow.jpg" alt="Snow" style="width:100%;">

Answer 1

96

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

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

javascript html filesystems src ПетрV
источник

3

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

Boris Callens

2

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

xji

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

0112

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

0112

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

модулем

Answer 2

3

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

Boris Callens

Answer 3

2

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

xji

Answer 4

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

0112

Answer 5

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

0112

Answer 6

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

модулем

Answer 7

64

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

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

Bjorn
источник

1

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

Хавьер

1

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

PeterV

1

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

Bjorn

2

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

MKaama

2

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

MKaama

Answer 8

1

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

Хавьер

Answer 9

1

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

PeterV

Answer 10

1

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

Bjorn

Answer 11

2

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

MKaama

Answer 12

2

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

MKaama

Answer 13

31

не следует ли вам использовать «file: // C: /localfile.jpg» вместо «C: /localfile.jpg»?

АндреДурао
источник

Answer 14

27

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

Newtang
источник

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

jmojico

Answer 15

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

jmojico

Answer 16

18

C:не является распознанной схемой URI. Попробуйте file://c|/...вместо этого.

Игнасио Васкес-Абрамс
источник

Answer 17

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

Откройте IIS
Добавить виртуальный каталог на веб-сайт по умолчанию
- виртуальный путь будет тем, что вы хотите просмотреть в браузере. Поэтому, если вы выберете « serverName / images, вы сможете перейти к нему, перейдя по адресу http: // serverName / images.
- Затем добавьте физический путь на диске C:
Добавьте соответствующие разрешения в папку на диске C: для «NETWORK SERVICE» и «IIS AppPool \ DefaultAppPool»
Обновить веб-сайт по умолчанию
И вы сделали. Теперь вы можете перейти к любому изображению в этой папке, перейдя по адресу http: //yourServerName/whateverYourFolderNameIs/yourImage.jpg и использовать этот URL-адрес в своем img src.

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

Answer 18

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

Answer 19

мы можем использовать 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>

Answer 20

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

raosaeedali

Answer 21

1

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

Равиндра Вайраги

Answer 22

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

Bandoleras

Answer 23

2

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

Джек Келли
источник

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

PeterV

5

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

Наска

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

PrashanD

Answer 24

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

PeterV

Answer 25

5

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

Наска

Answer 26

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

PrashanD

Answer 27

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

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

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

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

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

Answer 28

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?

осьминог,

Answer 29

3

Это не работает для меня в Chrome, но работает в IE?

осьминог,

Answer 30

0

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

Кайл Хадсон
источник

Answer 31

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

Answer 32

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

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

Answer 33

Я перепробовал множество техник и наконец нашел один на стороне 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);
                            }

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

Answer 34

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

<img src="file:///C:/Users/91860/Desktop/snow.jpg" alt="Snow" style="width:100%;">

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

Ответы: