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

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?

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.

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

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"/>

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

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

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

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>

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.

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

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

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)

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

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

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 ().

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

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