Bagaimana cara menampilkan gambar lokal di Chrome menggunakan file: // protokol?

23

Saya ingin dapat menentukan jalur file lokal untuk gambar pada halaman web yang dikirim melalui http menggunakan Chrome - apakah ini mungkin?

Saya ingat melakukan ini menggunakan IE tetapi tidak ingat caranya! Beberapa pengaturan tepercaya saya pikir ...

google-chrome url pictures JSH
sumber

Jawaban:

14

Anda dapat mengonversi gambar ke kode base-64, misalnya dengan " http://duri.me/ " dan menyalin hasilnya ke browser! Seperti:

<img width='16' height='16'  src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAApklEQVQ4jWP8//8/Ay5Q4s6GU7Jn5y9GBgYGBiacuokELKTYSpQByKB68UkMMUExQ0ZkPsVeYEQPREZGRpK8gOGCdy/PwTEyH8ZGF8MbBgwMDAxC4kZ4xfAaALMFGfz//5+6gYjXBS+fXUHhaxjEMqKrQXGBglU8SgyIS+mgYHR5DAPIAYz////HavL5DQVwtmHABAyND44tZGRgwBMG2DRhAxR7AQBhgT3yD6eBRwAAAABJRU5ErkJggg=='>
Diogo Cid
sumber
7
Informasi ini mungkin berguna bagi seseorang, tetapi saya pikir itu tidak benar-benar menjawab pertanyaan ini.
G-Man Mengatakan 'Reinstate Monica'
12

Karena Anda menyebutkan 'Chrome', Anda dapat menggunakan ekstensi Chrome untuk melakukan ini, untuk memungkinkan akses lokal ke file Anda.

Ikuti langkah ini:

1) Di folder lokal tempat gambar Anda berada, buat file ini bernama 'manifest.json' dan masukkan ini:

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

2) Masukkan ini adalah bilah alamat chrome Anda: chrome: // extensions /

3) Pastikan 'Mode pengembang' dicentang (Kanan atas halaman)

4) Klik tombol 'Muat Ekstensi yang Belum Dibongkar'

5) Navigasikan ke folder lokal tempat gambar dan file manifes.json berada, klik ok

6) Ekstensi 'File Exposer' sekarang harus terdaftar dalam daftar, dan memiliki tanda centang terhadap 'Diaktifkan'. Jika folder berada di drive jaringan atau drive lambat lain atau memiliki banyak file, mungkin diperlukan 10-20 detik atau lebih untuk muncul dalam daftar.

7) Catat string 'ID' yang telah dikaitkan dengan ekstensi Anda. Ini adalah EXTENSION_ID

8) Sekarang dalam HTML Anda, Anda dapat mengakses file dengan yang berikut, mengubah 'EXTERNSION_ID' ke ID apa pun yang dihasilkan ekstensi Anda:

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

Perhatikan, bahwa * .jpg bersifat rekursif dan secara otomatis akan mencocokkan file dalam folder yang ditentukan dan semua sub folder, Anda tidak perlu menentukan untuk setiap sub folder. Juga perhatikan, itu Case Sensitive.

Dalam tag 'img' Anda tidak menentukan folder asli, relatif dari folder itu, jadi hanya sub folder yang perlu ditentukan.

Jika Anda memodifikasi file manifest.json, Anda harus mengklik tautan 'Muat Ulang (Ctrl + R)' di sebelah ekstensi.

Rob Donovan
sumber
8

Halaman web non-lokal tidak dapat mengakses file lokal di Chrome atau browser web modern apa pun.

Anda dapat mengesampingkan ini menggunakan LocalLinks ( untuk Firefox ), tetapi ini hanya akan bekerja di mesin Anda sendiri.

grawity
sumber
2
tidak akan berfungsi untuk gambar
Willem D'Haeseleer
Saya pikir chrome bodoh, saya mencoba pada sebuah about:blankhalaman dan itu tidak memungkinkan, saya lelah membuka file HTML lokal dan itu berhasil, bahkan untuk gambar terlepas dari apa yang dikatakan @ WillemD'Haeseleer. Kode saya adalah ini:drawing = new Image(); drawing.src = "C:/Users/S/Videos/net.png";
Shayan
2

di Chrome ini terlihat seperti ini 

file:///C:/sample.txt
KutscheraIT
sumber
Saya setelah melakukan sesuatu seperti ini, di-host di web, tetapi melihat pengguna file lokal .... <! 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 =" Jenis-Konten "konten =" teks / html; charset = utf -8 "/> <title> example </title> </head> <body> <img src =" file: /// c: /graphics/image.jpg "height =" 200px "width =" 200px "/ > <h1> Selamat Datang </h1> <p> Halo dunia! </p> </body> </html>
JSH
1
Saya baru saja mencoba file .html dan .jpg dengan file: /// notasi, keduanya dirender dengan benar. Bisakah Anda memposting tangkapan layar yang memperlihatkan bilah alamat dan beberapa konten?
KutscheraIT
coba jsh.learningict.net - jelas gambar yang tidak akan Anda miliki tetapi kode menunjukkan kepada Anda gagasan tentang apa yang saya cari
JSH
Saya hanya bisa menebak bahwa Anda mengacu pada tag gambar, yang juga berfungsi dengan baik ketika saya mengganti src dengan <img src = "file: /// c: \ test.jpg" height = "200px" width = "200px" > c: \ test.jpg adalah jpg yang valid di jalur itu dan menunjukkan baik-baik saja.
KutscheraIT
bertanya-tanya apakah itu hal osx? src ref berfungsi dengan baik sendirian di bilah alamat Chrome, hanya saja tidak dalam kode HTML
JSH
2

Jika Anda ingin menguji gambar lokal di situs langsung, Anda dapat menjalankan server web lokal dan mengatur URL seperti http://127.0.0.1:8123/img.jpg di halaman menggunakan DevTools

Ada berbagai cara untuk menjalankan server web: 1. Ekstensi untuk browser "Web Server untuk Chrome" dengan folder yang ditentukan https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

  1. Jika Anda memiliki python, jalankan server http tertanam di folder yang dipilih

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

  2. Gunakan server siap produksi seperti nginx , apache

koxt
sumber
0

Dalam kasus saya, saya hanya perlu melihat seperti apa perubahan gambar kecil itu dalam berbagai ukuran responsif. Cara termudah untuk Menyimpan sebagai ... halaman web lengkap ke desktop dan kemudian membukanya. Saya memeriksa dan mengedit src gambar.

changokun
sumber
Tampaknya itu sama sekali bukan apa yang diminta OP, bahkan tidak terkait. Harap baca pertanyaan dengan seksama, dan jangan menjawab atau berkomentar kecuali Anda memiliki informasi yang relevan untuk ditambahkan.
music2myear
1
Tapi itu yang saya cari
Samuel Thompson
-1

Oke, Anda tidak bisa membiarkan orang lain mengakses sistem file lokal Anda! Anda akan memerlukan layanan server seperti Apache, biarkan komputer Anda berjalan 24 jam sehari, pastikan komputer tidak kepanasan, jaga keamanan yang baik, dan banyak lagi untuk menjadikannya mungkin. Dan karena administrasi server mahal dan memakan waktu, kebanyakan orang membiarkan pro meng-host barang-barang kami untuk kami (Webhosting).

Kesimpulannya, jika Anda tidak ingin menjalankan server Anda sendiri, lebih mudah mengunggahnya ke webhoster pilihan Anda.

pengguna759576
sumber
2
Pertanyaannya bukan tentang membiarkan internet mengakses file-file besar di sistem lokal.
xenoid