Чому я не можу зробити <img src = “C: /localfile.jpg”>?

98

Це працює, якщо файл html локальний (на моєму диску C), але не якщо файл html знаходиться на сервері, а файл зображення локальний. Чому так?

Будь-які можливі обхідні шляхи?

— PeterV
джерело

3

Чи можу я запитати, чому ви хочете зробити таке?

— Борис Калленс

2

@BorisCallens Наприклад, я, можливо, захочу протестувати зміну зображення на моєму веб-сайті, коли у мене є нове зображення на моїй машині, і я не хочу проходити весь процес завантаження на інсценізацію. Здається, єдиним способом зробити це буде зміна іміджу в середовищі розробки, а не постановка.

— xji

Це також чудовий спосіб пожартувати над своїми менш компетентними знайомими, змусивши їх подумати, що ви зламали веб-сайт.

— 0112,

Інший спосіб зробити це швидко - завантажити файл, щоб сказати, Google Drive або інше, а потім скопіювати URL-адресу зображення та вставити всерединуsrc=""

— 0112,

Просто використовуйте веб-сервер розробки на своїй машині. В наш час це легко, оскільки навіть PHP поставляється із вбудованим.

— MauganRa

64

Це була б уразливість системи безпеки, якби клієнт міг запитувати файли локальної файлової системи, а потім використовувати JavaScript, щоб з’ясувати, що в них.

Єдиний спосіб обійти це побудувати розширення в браузері. Розширення Firefox та IE можуть мати доступ до локальних ресурсів. Chrome набагато більш обмежувальний.

— Бьорн
джерело

1

все-таки флеш вдається отримати доступ до будь-чого, що вибере користувач, навіть у Chrome

— Хав'єр

1

Проголосував за це, тому що він відповів "чому" і запропонував деякі шляхи. Що я, швидше за все, зроблю (і я знаю, що не надав багато передумов), це створити локальний веб-сервер для обслуговування локальних зображень. Таким чином браузер може їх відображати.

— PeterV

1

Flash може отримувати доступ до локальних ресурсів лише з наявним файлом політики, інакше він переходить у локальний режим і обмежується іншими способами.

— Бьорн,

2

Ця параноїчна безпека - лише порушення. Ви МОЖЕТЕ завантажити користувацькі файли на сервер за допомогою AJAX із форми з полем <input type = file>, але якщо ви хочете бути приємним з користувачем і показати попередній перегляд, МОЖЕТЕ здійснити зворотній шлях і завантажити файл на спочатку сервер. Як це безпечніше, ніж генерувати зображення попереднього перегляду локально?

— MKaama

2

Для того, щоб показати користувачеві приємний попередній перегляд, ВИ СЛУЖБАЙТЕ спочатку зробити КРУГЛУ ПОДОРОЖ ДО СЕРВЕРА. Це можливо за допомогою AJAX. Як завантажувати файл на сервер спочатку безпечніше, ніж генерувати зображення попереднього перегляду локально? Параноїчна безпека створює лише хвилювання, але не вирішує жодної проблеми.

— MKaama

32

чи не слід використовувати "file: // C: /localfile.jpg" замість "C: /localfile.jpg"?

— АндреДурао
джерело

Так, але цей фокус спрацює лише в системах Windows. У Linux ви повинні створити Symlink до ресурсу та розмістити посилання на тій самій веб-сторінці та викликати його за допомогою src = "...". Іншими словами, наскільки я спробував, префікс "file: //" не працюватиме в системах Linux, тоді як в системах Windows буде працювати ідеально.

— Енергетика

27

Браузери не мають доступу до локальної файлової системи, якщо ви не отримуєте доступ до локальної HTML-сторінки. Ви повинні десь завантажити зображення. Якщо він знаходиться в тому ж каталозі, що і файл html, ви можете використовувати<img src="localfile.jpg"/>

— Ньютанг
джерело

Я намагався досягти того ж, використовуючи абсолютний шлях "/localfile.jpg", але, схоже, браузер сприймає його як "веб-зображення", і він його не знаходить. Дякую!

— jmojico

18

C:не є визнаною схемою URI. file://c|/...Натомість спробуйте .

— Ігнасіо Васкес-Абрамс
джерело

6

Чесно кажучи, найпростішим способом було додати на сервер хостинг файлів.

Відкрийте IIS
Додайте віртуальний каталог на веб-сайті за замовчуванням
- віртуальний шлях буде тим, що ви хочете переглянути в браузері. Отже, якщо ви виберете " serverName / images", ви зможете переглянути його, перейшовши на http: // serverName / images
- Потім додайте фізичний шлях на диск C:
Додайте відповідні дозволи до папки на диску C: для «СЕТЕВОЇ СЛУЖБИ» та «IIS AppPool \ DefaultAppPool»
Оновити веб-сайт за замовчуванням
І готово. Тепер ви можете переглядати будь-яке зображення в цій папці, перейшовши до http: //yourServerName/whateverYourFolderNameIs/yourImage.jpg і використовувати цю URL-адресу у вашому img src

Сподіваюся, це комусь допомагає

— переднє маро
джерело

3

IE 9: Якщо ви хочете, щоб користувач подивився зображення перед тим, як опублікувати його на сервері: Користувач повинен ДОДАТИ веб-сайт до "списку надійних веб-сайтів".

— United4Peace
джерело

3

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

<!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. З цією метою ... він міг би не тільки знати, що є правильні зображення, але й керувати ними.

— Nazca

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

— Прашан,

1

Я бачу дві можливості для того, що ви намагаєтесь зробити:

Ви хочете, щоб ваша веб-сторінка, що працює на сервері, знайшла файл на комп’ютері, який ви спочатку створили?
Ви хочете, щоб він отримав його з ПК, який переглядає на сторінці?

Варіант 1 просто не має сенсу :)

Варіант 2 був би дірою в безпеці, браузер забороняє веб-сторінці (яка подається з Інтернету) завантажувати вміст на машину переглядача.

Кайл Хадсон сказав вам, що вам потрібно зробити, але це настільки базово, що мені важко повірити, що це все, що ви хочете зробити.

— Хуан Мендес
джерело

1

якщо ви використовуєте браузер Google chrome, ви можете використовувати ось так

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

Але якщо ви використовуєте Mozila Firefox, вам потрібно додати "файл" напр.

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

— Сачиндра Н. Пандей
джерело

3

Це не працювало для мене в Chrome, але це працює в IE?

— восьминіг

Це НЕ ПРАЦЮЄ в системах Linux, але буде добре працювати в системах Windows.

— Енергетика

1

Якщо ви розгортаєте локальний веб-сайт лише для себе або певних клієнтів, ви можете обійти це, запустивши mklink /D MyImages "C:/MyImages"в кореневому каталозі веб-сайту як адміністратор в cmd. Тоді в html, do <img src="MyImages/whatever.jpg">і символічне посилання, встановлене mklink, зв’яже відносне посилання src із посиланням на вашому диску C. Це вирішило це питання для мене, тож може допомогти іншим, хто прийде до цього питання.

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

— takanuva15
джерело

0

Вам потрібно також завантажити зображення, а потім посилатись на зображення на сервері.

— Кайл Хадсон
джерело

0

а як щодо того, щоб зображення було обраним користувачем? Використовуйте тег вводу: файл, а потім після того, як вони виділяють зображення, показують його на веб-сторінці клієнта? Це можливо для більшості речей. Зараз я намагаюся змусити його працювати для IE, але, як і у всіх продуктах Microsoft, це вилка кластера ().

— Fallenreaper
джерело

0

Я спробував багато методів і, нарешті, знайшов один із C # і JS Side. Ви не можете надати фізичний шлях атрибуту src, але можете надати рядок base64 як src тегу 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%;">

— Стів
джерело

Будьте обережні: цей трюк не спрацює в системах Linux.

— Енергетика