Dlaczego nie mogę zrobić <img src = “C: /localfile.jpg”>?

101

Działa, jeśli plik html jest lokalny (na moim dysku C), ale nie, jeśli plik html znajduje się na serwerze, a plik obrazu jest lokalny. Dlaczego?

Jakieś możliwe obejścia?

— PeterV
źródło

3

Czy mogę zapytać, dlaczego chciałbyś to zrobić?

— Boris Callens

2

@BorisCallens Na przykład mógłbym chcieć przetestować zmianę obrazu na mojej stronie testowej, kiedy mam nowy obraz na własnym komputerze i nie chcę przechodzić przez cały proces wgrywania do inscenizacji. Wydaje się, że jedynym sposobem na to byłaby zmiana obrazu w środowisku programistycznym zamiast i tak postoju.

— xji

Jest to również świetny sposób na zażartowanie ze swoich mniej kompetentnych technicznie znajomych, sprawiając, że myślą, że włamałeś się na stronę internetową.

— 0112

Innym sposobem na zrobienie tego szybko jest przesłanie pliku, aby powiedzieć, dysk Google lub cokolwiek innego, a następnie skopiuj adres URL obrazu i wklej go do środkasrc=""

— 0112

Po prostu użyj programistycznego serwera WWW na swoim komputerze. W dzisiejszych czasach jest to łatwe, ponieważ nawet PHP jest wyposażone w jedno wbudowane.

— MauganRa

66

Byłaby to luka w zabezpieczeniach, gdyby klient mógł zażądać plików lokalnego systemu plików, a następnie użyć JavaScript, aby dowiedzieć się, co się w nich znajduje.

Jedynym sposobem obejścia tego jest utworzenie rozszerzenia w przeglądarce. Rozszerzenia przeglądarki Firefox i rozszerzenia IE mogą uzyskiwać dostęp do zasobów lokalnych. Chrome jest znacznie bardziej restrykcyjny.

— Bjorn
źródło

1

nadal jednak flashowi udaje się uzyskać dostęp do wszystkiego, co wybierze użytkownik, nawet w przeglądarce Chrome

— Javier

1

Głosował za tym, ponieważ odpowiedział na pytanie dlaczego i dał kilka sposobów na obejście tego. Najprawdopodobniej (i wiem, że nie przedstawiłem zbyt wielu informacji), to utworzenie lokalnego serwera WWW do obsługi lokalnych obrazów. W ten sposób przeglądarka może je wyświetlić.

— PeterV

1

Flash może uzyskać dostęp do lokalnych zasobów tylko wtedy, gdy plik zasad jest na miejscu lub w inny sposób przechodzi do trybu lokalnego i jest ograniczony w inny sposób.

— Bjorn

2

Ta paranoiczna ochrona jest tylko zakłóceniem. Możesz przesłać pliki użytkownika na serwer za pomocą AJAX-a z formularza z polem <input type = file>, ale jeśli chcesz być miły dla użytkownika i pokazać podgląd, MUSISZ zrobić podróż w obie strony i przesłać plik do najpierw serwer. Czy jest to bezpieczniejsze niż lokalne generowanie obrazu podglądu?

— MKaama,

2

Aby pokazać użytkownikowi ładny podgląd, MUSISZ WYKONAĆ OKRĄGŁĄ PODRÓŻ NA SERWER. Jest to możliwe dzięki AJAX. W jaki sposób przesłanie pliku na serwer jest najpierw bezpieczniejsze niż lokalne wygenerowanie obrazu podglądu? Paranoiczne zabezpieczenie stwarza jedynie zakłócenia, ale nie rozwiązuje żadnego problemu.

— MKaama,

32

czy nie należy używać „file: // C: /localfile.jpg” zamiast „C: /localfile.jpg”?

— AndreDurao
źródło

Tak, ale ta sztuczka zadziała tylko w systemach Windows. W systemie Linux musisz utworzyć łącze symboliczne do zasobu, umieścić łącze na tej samej stronie internetowej i wywołać je za pomocą src = "...". Innymi słowy, o ile próbowałem, przedrostek „file: //” nie będzie działał w systemach Linux, ale będzie działał doskonale w systemach Windows.

— Energetyka

28

Przeglądarki nie mogą uzyskać dostępu do lokalnego systemu plików, chyba że uzyskujesz dostęp do lokalnej strony HTML. Musisz gdzieś przesłać obraz. Jeśli znajduje się w tym samym katalogu co plik html, możesz użyć<img src="localfile.jpg"/>

— Newtang
źródło

Próbowałem osiągnąć to samo, używając ścieżki bezwzględnej „/localfile.jpg”, ale wygląda na to, że przeglądarka traktuje to jak „obraz sieciowy” i go nie znajduje. Dzięki!

— jmojico

18

C:nie jest rozpoznanym schematem URI. Spróbuj file://c|/...zamiast tego.

— Ignacio Vazquez-Abrams
źródło

6

Szczerze mówiąc, najłatwiejszym sposobem było dodanie hostingu plików do serwera.

Otwórz IIS
Dodaj katalog wirtualny w domyślnej witrynie sieci Web
- wirtualna ścieżka będzie tym, do czego chcesz przeglądać w przeglądarce. Więc jeśli wybierzesz " nazwa_serwera / obrazy , będziesz mógł do niego przeglądać, przechodząc do http: // nazwa_serwera / images
- Następnie dodaj ścieżkę fizyczną na dysku C :.
Dodaj odpowiednie uprawnienia do folderu na dysku C: dla „NETWORK SERVICE” i „IIS AppPool \ DefaultAppPool”
Odśwież domyślną witrynę sieci Web
I jesteś skończony. Możesz teraz przejść do dowolnego obrazu w tym folderze, przechodząc do http: //yourServerName/cokolwiekYourFolderNameIs/yourImage.jpg i użyć tego adresu URL w swoim img src

Mam nadzieję, że to komuś pomoże

— foremaro
źródło

3

IE 9: Jeśli chcesz, aby użytkownik obejrzał obraz przed wysłaniem go na serwer: Użytkownik powinien DODAĆ witrynę do „listy zaufanych witryn internetowych”.

— United4Peace
źródło

3

możemy użyć funkcji FileReader () javascript i jego funkcji readAsDataURL (fileContent), aby wyświetlić plik lokalnego dysku / folderu. Powiąż zdarzenie zmiany z obrazem, a następnie wywołaj funkcję showpreview języka JavaScript. Spróbuj tego -

<!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>

— Ravindra Vairagi
źródło

Chrome zgłasza błąd w konsoli „Niedozwolone jest ładowanie zasobu lokalnego”.

— raosaeedali

1

@raosaeedali Przepraszamy za spóźnioną odpowiedź. Jeśli chcemy wyświetlać obrazy z dysku lokalnego bezpośrednio w naszym tagu img na stronie HTML, musimy podać ścieżkę względną. Innym rozwiązaniem jest pobranie ścieżki pliku z pliku typu wejściowego i przypisanie źródła pliku do znacznika img, w tym celu zaktualizowałem kod.

— Ravindra Vairagi

@RavindraVairagi czy istnieje sposób na wyświetlenie obrazu bez wybierania pliku w eksploratorze? Próbowałem użyć twojego skryptu i nie otrzymałem błędu „Nie można załadować lokalnego zasobu”, ale chcę znaleźć sposób na bezpośrednie wydrukowanie obrazu, jeśli istnieje ...

— Bandoleras

2

Pomijając obserwację Newtanga dotyczącą zasad bezpieczeństwa, skąd masz wiedzieć, że każdy, kto przegląda twoją stronę, będzie miał prawidłowe obrazy c:\localfile.jpg? Nie możesz. Nawet jeśli myślisz, że możesz, nie możesz. Po pierwsze, zakłada środowisko Windows.

— Jack Kelly
źródło

Chyba że możesz. Nie podałem zbyt wiele kontekstu w pytaniu, wiem :) Ale w tym przypadku możemy faktycznie wiedzieć.

— PeterV

5

Co jeśli planuje mieć tylko 10 użytkowników w biurze, z których wszyscy mają środowiska Windows i poprawne obrazy w c: \ localfile.jpg. W tym celu ... byłby w stanie nie tylko wiedzieć, że są tam prawidłowe obrazy, ale także je kontrolować.

— Nazca

To pytanie jest ważne, ponieważ jego wymaganie dotyczy środowiska Windows, obsługującego bardzo ograniczoną grupę odbiorców. Na przykład napotkałem ten sam problem podczas projektowania serwera internetowego opartego na Arduino, w którym jedynym klientem był komputer z systemem Windows w tej samej sieci LAN co serwer Arduino. Arduino zbyt wolno dostarczało obrazy do klienta, więc musiałem przechowywać obrazy na samym komputerze klienckim.

— PrashanD

1

Widzę dwie możliwości tego, co próbujesz zrobić:

Chcesz, aby Twoja strona internetowa działająca na serwerze znajdowała plik na komputerze, na którym została zaprojektowana?
Chcesz, żeby pobierał go z komputera, który przegląda stronę?

Opcja 1 po prostu nie ma sensu :)

Opcja 2 byłaby luką w zabezpieczeniach, przeglądarka uniemożliwia stronie internetowej (obsługiwanej z sieci) ładowanie treści na komputer przeglądarki.

Kyle Hudson powiedział ci, co musisz zrobić, ale to jest tak podstawowe, że trudno mi uwierzyć, że to wszystko, co chcesz zrobić.

— Juan Mendes
źródło

1

jeśli używasz przeglądarki Google Chrome, możesz używać w ten sposób

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

Ale jeśli używasz przeglądarki Mozila Firefox, musisz dodać „plik” np.

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

— Sachindra N. Pandey
źródło

3

To nie działało dla mnie w Chrome, ale działa w IE?

— ośmiornica

NIE DZIAŁA to w systemach Linux, ale będzie działać dobrze w systemach Windows.

— Energetyka

1

Jeśli wdrażasz lokalną witrynę internetową tylko dla siebie lub niektórych klientów, możesz obejść ten problem, uruchamiając mklink /D MyImages "C:/MyImages"w katalogu głównym witryny jako administrator w cmd. Następnie w html, wykonaj, <img src="MyImages/whatever.jpg">a dowiązanie symboliczne utworzone przez mklink połączy relatywne łącze src z łączem na dysku C. Rozwiązał ten problem dla mnie, więc może pomóc innym, którzy przyjdą na to pytanie.

(Oczywiście to nie zadziała w przypadku publicznych witryn internetowych, ponieważ nie można łatwo uruchamiać poleceń cmd na komputerach ludzi)

— takanuva15
źródło

1

Wypróbowałem wiele technik i ostatecznie znalazłem jedną po stronie C # i stronie JS. Nie możesz podać fizycznej ścieżki do atrybutu src, ale możesz podać ciąg base64 jako src do tagu Img. Spójrzmy na poniższy przykład kodu C #.

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

Kod 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);
                            }

Mam nadzieję, że to pomoże

— Naveed Khan
źródło

0

Musisz również przesłać obraz, a następnie link do obrazu na serwerze.

— Kyle Hudson
źródło

0

co z tym, aby obraz był czymś wybranym przez użytkownika? Użyć znacznika input: file, a po wybraniu obrazu pokazać go na stronie klienta? Jest to wykonalne w przypadku większości rzeczy. W tej chwili próbuję sprawić, by działał w IE, ale tak jak w przypadku wszystkich produktów firmy Microsoft jest to fork ().

— Fallenreaper
źródło

0

zaczyna się file:///i kończy na filenamepowinno działać:

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

— Steve
źródło

Uważaj: ta sztuczka nie zadziała w systemach Linux.

— Energetyka