Mengapa saya tidak bisa melakukan <img src = “C: /localfile.jpg”>?

97

Ini berfungsi jika file html lokal (di drive C saya), tetapi tidak jika file html ada di server dan file gambar lokal. Mengapa demikian?

Ada solusi yang mungkin?

javascript html filesystems src PeterV
sumber
3
Bolehkah saya bertanya mengapa Anda ingin melakukan hal seperti itu?
Boris Callens
2
@BorisCallens Misalnya, saya mungkin ingin menguji perubahan gambar di situs pementasan saya, saat saya memiliki gambar baru di komputer saya sendiri dan saya tidak ingin melalui seluruh proses pengunggahan ke pementasan. Tampaknya satu-satunya cara untuk melakukannya adalah dengan mengubah citra di lingkungan pengembangan daripada mementaskan.
xji
Ini juga merupakan cara yang bagus untuk membuat lelucon pada kenalan Anda yang kurang kompeten secara teknis, membuat mereka mengira Anda telah meretas situs web.
0112
Cara lain untuk melakukan ini dengan cepat adalah mengunggah file yang bertuliskan, google drive atau apa pun kemudian salin url gambar dan tempel di dalamnyasrc=""
0112
Cukup gunakan server web pengembangan di komputer Anda. Sekarang mudah karena bahkan PHP sudah dilengkapi dengan built in.
MauganRa

Jawaban:

64

Ini akan menjadi kerentanan keamanan jika klien dapat meminta file sistem file lokal dan kemudian menggunakan JavaScript untuk mencari tahu apa yang ada di dalamnya.

Satu-satunya cara untuk mengatasi ini adalah dengan membangun ekstensi di browser. Ekstensi Firefox dan ekstensi IE dapat mengakses sumber daya lokal. Chrome jauh lebih ketat.

Bjorn
sumber
1
tetap saja, flash berhasil mengakses apa pun yang dipilih pengguna, bahkan di Chrome
Javier
1
Suara positif ini karena menjawab mengapa dan memberikan beberapa cara untuk mengatasinya. Apa yang mungkin saya lakukan (dan saya tahu saya tidak memberikan banyak latar belakang) adalah membuat server web lokal untuk menyajikan gambar lokal. Dengan begitu browser dapat menampilkannya.
PeterV
1
Flash hanya dapat mengakses sumber daya lokal dengan file kebijakan di tempat atau sebaliknya itu masuk ke mode lokal dan dibatasi dengan cara lain.
Bjorn
2
Keamanan paranoid ini hanyalah sebuah gangguan. Anda BISA mengunggah file pengguna ke server dengan AJAX dari formulir dengan bidang <input type = file>, tetapi jika Anda ingin bersikap baik kepada pengguna dan menampilkan pratinjau, Anda HARUS melakukan perjalanan pulang pergi dan mengunggah file ke server pertama. Bagaimana cara ini lebih aman daripada membuat gambar pratinjau secara lokal?
MKaama
2
Untuk menampilkan pratinjau yang bagus kepada pengguna, ANDA HARUS MELAKUKAN PERJALANAN BULAT KE SERVER terlebih dahulu. Itu mungkin dengan AJAX. Bagaimana cara mengupload file ke server terlebih dahulu lebih aman daripada membuat gambar pratinjau secara lokal? Keamanan paranoid hanya menciptakan gangguan, tetapi tidak menyelesaikan masalah apa pun.
MKaama
31

bukankah sebaiknya Anda menggunakan "file: // C: /localfile.jpg" daripada "C: /localfile.jpg"?

AndreDurao
sumber
27

Browser tidak diizinkan untuk mengakses sistem file lokal kecuali Anda mengakses halaman html lokal. Anda harus mengunggah gambar di suatu tempat. Jika ada di direktori yang sama dengan file html, maka Anda bisa menggunakan<img src="localfile.jpg"/>

Newtang
sumber
Saya mencoba untuk mencapai hal yang sama menggunakan path absolut "/localfile.jpg" tetapi tampaknya browser menganggapnya seperti "gambar web" dan tidak menemukannya. Terima kasih!
jmojico
18

C:bukan skema URI yang dikenali. Coba file://c|/...saja.

Ignacio Vazquez-Abrams
sumber
6

Sejujurnya cara termudah adalah dengan menambahkan file hosting ke server.

  • Buka IIS

  • Tambahkan Direktori Virtual di bawah Situs Web Default

    • jalur virtual akan menjadi apa yang ingin Anda telusuri di browser. Jadi jika Anda memilih " serverName / images Anda akan dapat menjelajahinya dengan membuka http: // serverName / images
    • Kemudian tambahkan jalur fisik di drive C :.

  • Tambahkan izin yang sesuai ke folder di drive C: untuk "NETWORK SERVICE" dan "IIS AppPool \ DefaultAppPool"

  • Segarkan Situs Web Default

  • Dan Anda sudah selesai. Anda sekarang dapat menelusuri gambar apa pun di folder itu dengan menavigasi ke http: //yourServerName/whateverYourFolderNameIs/yourImage.jpg dan menggunakan url itu di img src Anda

Semoga ini bisa membantu seseorang

foremaro
sumber
3

IE 9: Jika Anda ingin pengguna melihat gambar sebelum mempostingnya ke server: Pengguna harus MENAMBAHKAN situs web ke "daftar Situs web tepercaya".

United4Peace
sumber
3

kita dapat menggunakan FileReader () javascript dan fungsi readAsDataURL (fileContent) untuk menampilkan file drive / folder lokal. Ikat peristiwa perubahan ke gambar lalu panggil fungsi showpreview javascript. Coba ini -

<!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
sumber
Chrome membuat kesalahan di konsol "Tidak diizinkan untuk memuat sumber daya lokal".
raosaeedali
1
@raosaeedali Maaf atas tanggapan yang terlambat. Jika kita ingin menampilkan gambar dari drive lokal ke dalam tag img halaman HTML kita secara langsung maka kita perlu memberikan path relatif. Solusi lain adalah kami mendapatkan jalur file dari file tipe input dan menetapkan sumber file ke tag img untuk ini saya memperbarui kode.
Ravindra Vairagi
@RavindraVairagi adakah cara untuk menampilkan gambar tanpa memilih file di explorer? Saya telah mencoba menggunakan skrip Anda dan saya tidak mendapatkan pesan kesalahan "Tidak diizinkan untuk memuat sumber daya lokal" tetapi saya ingin menemukan cara untuk mencetak gambar secara langsung, jika ada ...
Bandoleras
2

Pengamatan Newtang tentang aturan keamanan mengesampingkan, bagaimana Anda akan tahu bahwa siapa pun yang melihat halaman Anda akan memiliki gambar yang benar c:\localfile.jpg? Tidak boleh. Bahkan jika Anda pikir Anda bisa, Anda tidak bisa. Ini mengandaikan lingkungan jendela, untuk satu hal.

Jack Kelly
sumber
Kecuali Anda bisa. Saya belum memberikan banyak konteks pada pertanyaannya, saya tahu :) Tapi dalam hal ini kita sebenarnya bisa tahu.
PeterV
5
Bagaimana jika dia hanya berencana memiliki 10 pengguna di kantor yang semuanya memiliki lingkungan windows dan gambar yang benar di c: \ localfile.jpg. Untuk itu ... dia akan sepenuhnya mampu untuk tidak hanya mengetahui bahwa gambar yang benar ada di sana tetapi juga mengontrolnya.
Nazca
Pertanyaan ini valid karena persyaratannya untuk lingkungan windows, melayani audiens yang sangat terbatas. Misalnya, saya mengalami masalah yang sama ketika saya merancang server web berbasis Arduino di mana satu-satunya klien adalah PC windows pada LAN yang sama dengan server Arduino. Arduino terlalu lambat dalam menyajikan gambar ke klien jadi saya perlu menyimpan gambar di mesin klien itu sendiri.
PrashanD
1

Saya melihat dua kemungkinan untuk apa yang Anda coba lakukan:

  1. Anda ingin halaman web Anda, yang berjalan di server, menemukan file di komputer yang awalnya Anda rancang?

  2. Anda ingin mengambilnya dari pc yang sedang dilihat di halaman?

Opsi 1 tidak masuk akal :)

Opsi 2 akan menjadi lubang keamanan, browser melarang halaman web (disajikan dari web) memuat konten di mesin penampil.

Kyle Hudson memberi tahu Anda apa yang perlu Anda lakukan, tetapi itu sangat mendasar sehingga saya merasa sulit untuk percaya hanya ini yang ingin Anda lakukan.

Juan Mendes
sumber
1

jika Anda menggunakan browser google chrome Anda dapat menggunakan seperti ini

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

Tetapi jika Anda menggunakan Mozila Firefox, Anda perlu menambahkan "file" ex.

<img src="file:E://bulbpro/pic_bulboff.gif"   width="150px" height="200px">
Sachindra N. Pandey
sumber
3
Itu Tidak berhasil untuk saya di chrome, tetapi berfungsi di IE?
gurita
0

Anda juga perlu mengunggah gambar, lalu tautkan ke gambar di server.

Kyle Hudson
sumber
0

bagaimana dengan membuat gambar menjadi sesuatu yang dipilih oleh pengguna? Gunakan tag input: file dan kemudian setelah mereka memilih gambar, tunjukkan di halaman web sisi klien? Itu bisa dilakukan untuk banyak hal. Saat ini saya mencoba membuatnya berfungsi untuk IE, tetapi seperti semua produk Microsoft, ini adalah garpu cluster ().

Fallenreaper
sumber
0

Jika Anda menerapkan situs web lokal hanya untuk Anda sendiri atau klien tertentu, Anda dapat menyiasatinya dengan menjalankan mklink /D MyImages "C:/MyImages"direktori root situs web sebagai admin di cmd. Kemudian di html, do <img src="MyImages/whatever.jpg">dan tautan simbolis yang dibuat oleh mklink akan menghubungkan tautan src relatif dengan tautan di drive C Anda. Ini memecahkan masalah ini untuk saya, jadi ini dapat membantu orang lain yang datang ke pertanyaan ini.

(Jelas ini tidak akan berfungsi untuk situs web publik karena Anda tidak dapat menjalankan perintah cmd di komputer orang dengan mudah)

takanuva15
sumber
0

Saya telah mencoba banyak teknik dan akhirnya menemukan satu di sisi C # dan Sisi JS. Anda tidak dapat memberikan jalur fisik ke atribut src tetapi Anda dapat memberikan string base64 sebagai tag src ke Img. Mari kita lihat contoh kode C # di bawah ini.

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

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

Semoga ini bisa membantu

Naveed Khan
sumber
0

dimulai dengan file:///dan diakhiri dengan filenameshould work:

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