Jak wyświetlić lokalne obrazy w Chrome przy użyciu protokołu file: //?

23

Chciałbym móc określić lokalną ścieżkę pliku dla obrazu na stronie internetowej dostarczanej przez http za pomocą Chrome - czy to możliwe?

Pamiętam, że robiłem to za pomocą IE, ale nie pamiętam jak! Myślę, że niektóre zaufane ustawienia ...

google-chrome url pictures JSH
źródło

Odpowiedzi:

14

możesz przekonwertować obraz na kod base-64, na przykład za pomocą „ http://duri.me/ ” i skopiować wynik do przeglądarki! Lubić:

<img width='16' height='16'  src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAApklEQVQ4jWP8//8/Ay5Q4s6GU7Jn5y9GBgYGBiacuokELKTYSpQByKB68UkMMUExQ0ZkPsVeYEQPREZGRpK8gOGCdy/PwTEyH8ZGF8MbBgwMDAxC4kZ4xfAaALMFGfz//5+6gYjXBS+fXUHhaxjEMqKrQXGBglU8SgyIS+mgYHR5DAPIAYz////HavL5DQVwtmHABAyND44tZGRgwBMG2DRhAxR7AQBhgT3yD6eBRwAAAABJRU5ErkJggg=='>
Diogo Cid
źródło
7
Ta informacja może być dla kogoś przydatna, ale myślę, że tak naprawdę nie odpowiada na to pytanie.
G-Man mówi „Reinstate Monica”
12

Ponieważ wspomniałeś o „Chrome”, możesz użyć do tego rozszerzeń Chrome, aby umożliwić lokalny dostęp do swoich plików.

Wykonaj następujące kroki:

1) W lokalnym folderze, w którym znajdują się Twoje obrazy, utwórz ten plik o nazwie „manifest.json” i wprowadź go:

{
  "name": "File Exposer",
  "manifest_version": 2,
  "version": "1.0",
  "web_accessible_resources": ["*.jpg","*.JPG"]
}

2) Umieść to jest chromowany pasek adresu: chrome: // extensions /

3) Upewnij się, że zaznaczono „Tryb programisty” (prawy górny róg strony)

4) Kliknij przycisk „Load Unpacked Extension”

5) Przejdź do lokalnego folderu, w którym znajdują się obrazy i plik manifest.json, kliknij OK

6) Rozszerzenie „File Exposer” powinno być teraz wymienione na liście i mieć zaznaczone pole wyboru „Enabled”. Jeśli folder znajduje się na dysku sieciowym lub innym wolnym dysku lub zawiera wiele plików, pojawienie się na liście może potrwać 10–20 sekund lub dłużej.

7) Zwróć uwagę na ciąg „ID”, który został powiązany z twoim rozszerzeniem. To jest EXTENSION_ID

8) Teraz w swoim HTML możesz uzyskać dostęp do pliku w następujący sposób, zmieniając „EXTERNSION_ID” na dowolny identyfikator wygenerowany przez twoje rozszerzenie:

<img src='chrome-extension://EXTENSION_ID/example1.jpg'>

Zauważ, że * .jpg jest rekurencyjny i automatycznie dopasuje pliki w określonym folderze i wszystkich podfolderach, nie musisz określać dla każdego podfolderu. Zwróć też uwagę na wielkość liter.

W znaczniku „img” nie określasz oryginalnego folderu, jego krewnego z tego folderu, więc należy podać tylko podfoldery.

Jeśli zmodyfikujesz plik manifest.json, musisz kliknąć link „Załaduj ponownie (Ctrl + R)” obok rozszerzenia.

Rob Donovan
źródło
8

Nielokalne strony internetowe nie mają dostępu do lokalnych plików w Chrome ani żadnej nowoczesnej przeglądarce internetowej.

Możesz to zmienić za pomocą LocalLinks ( dla Firefoksa ), ale będzie działać tylko na twoim komputerze.

grawitacja
źródło
2
nie działa dla obrazów
Willem D'Haeseleer
Myślę, że chrome jest głupie, próbowałem na about:blankstronie i nie pozwalałem na to, zmęczony otworzyłem lokalny plik HTML i zadziałało, nawet w przypadku obrazów pomimo tego, co powiedział @ WillemD'Haeseleer. Mój kod był następujący:drawing = new Image(); drawing.src = "C:/Users/S/Videos/net.png";
Shayan
2

w Chrome wygląda to tak 

file:///C:/sample.txt
KutscheraIT
źródło
Po zrobieniu czegoś takiego, hostowanego w sieci, ale patrząc na pliki lokalne użytkowników ... <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" " w3.org/TR /xhtml1/DTD/xhtml1-strict.dtd "> <html xmlns =" w3.org/1999/xhtml "> <head> <meta http-equiv =" Content-Type "content =" text / html; charset = utf -8 "/> <title> przykład </title> </head> <body> <img src =" plik: /// c: /graphics/image.jpg "height =" 200px "width =" 200px "/ > <h1> Witamy </h1> <p> Witaj świecie! </p> </body> </html>
JSH
1
Właśnie próbowałem plików .html i .jpg z notacją file: ///, oba zostały poprawnie wyrenderowane. Czy możesz opublikować zrzut ekranu przedstawiający pasek adresu i część zawartości?
KutscheraIT
spróbuj jsh.learningict.net - oczywiście obraz, którego nie będziesz miał, ale kod pokazuje, o co mi chodzi
JSH
Mogę tylko zgadywać, że masz na myśli tag obrazu, który działa również dobrze, gdy zamieniam src na <img src = "file: /// c: \ test.jpg" height = "200px" width = "200px" > c: \ test.jpg jest prawidłowym plikiem JPG w tej ścieżce i pokazuje się dobrze.
KutscheraIT
zastanawiam się, czy to jest rzecz z OSX? src ref działa samotnie w pasku adresu Chrome, po prostu nie w kodzie HTML
JSH
2

Jeśli chcesz przetestować lokalny obraz na stronie na żywo, możesz uruchomić lokalny serwer WWW i ustawić URL taki jak http://127.0.0.1:8123/img.jpg na stronie za pomocą DevTools

Istnieją różne sposoby uruchamiania serwera internetowego: 1. Rozszerzenie przeglądarki „Serwer WWW dla Chrome” ze zdefiniowanym folderem https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

  1. Jeśli masz Python, uruchom wbudowany serwer HTTP w wybranym folderze

    python3 -m http.server 8123 # wersja
    python 3 python -m SimpleHTTPServer 8123 # wersja python 2

  2. Użyj serwera gotowego do produkcji, takiego jak Nginx , Apache

koxt
źródło
0

W moim przypadku musiałem tylko zobaczyć, jak będzie wyglądać jedna mała zmiana obrazu w różnych elastycznych rozmiarach. Najłatwiej było zapisać jako ... kompletną stronę na pulpicie, a następnie otworzyć ją. Sprawdzam i edytuję obraz src.

changokun
źródło
To wcale nie wydaje się być tym, o co prosi OP, nawet nie jest powiązane. Przeczytaj uważnie pytania i nie odpowiadaj ani nie komentuj, chyba że masz odpowiednie informacje do dodania.
music2myear
1
Ale tego właśnie szukałem
Samuel Thompson,
-1

Okej, nie możesz po prostu pozwolić komuś innemu uzyskać dostęp do twojego lokalnego systemu plików! Potrzebujesz usługi serwera, takiej jak Apache, pozwól, aby komputer działał 24 godziny na dobę, upewnij się, że się nie przegrzeje, zadbaj o dobre bezpieczeństwo i wiele więcej, aby to w ogóle możliwe. A ponieważ administracja serwerami jest kosztowna i czasochłonna, większość ludzi pozwala profesjonalistom hostować nasze rzeczy dla nas (Webhosting).

Podsumowując, jeśli nie chcesz uruchamiać własnego serwera, o wiele łatwiej jest po prostu przesłać go do wybranego webhostera.

użytkownik759576
źródło
2
Pytanie nie dotyczy dostępu do dużych plików w systemie lokalnym.
ksenoid