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

Odpowiedzi:

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ć:

  1. Chcesz, aby Twoja strona internetowa działająca na serwerze znajdowała plik na komputerze, na którym została zaprojektowana?

  2. 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