Neden <img src = “C: /localfile.jpg”> yapamıyorum?


96

Html dosyası yerelse (benim C sürücümde) çalışır, ancak html dosyası bir sunucuda ve görüntü dosyası yerelse çalışmaz. Neden?

Herhangi bir olası geçici çözüm var mı?


3
Neden böyle bir şey yapmak istediğinizi sorabilir miyim?
Boris Callens

2
@BorisCallens Örneğin, yeni imajı kendi makinemde aldığımda ve sahnelemeye yükleme işleminin tamamını yapmak istemediğimde, sahneleme web sitemdeki bir görüntünün değişikliğini test etmek isteyebilirim. Görünüşe göre bunu yapmanın tek yolu, her halükarda sahnelemek yerine, geliştirme ortamındaki imajı değiştirmek.
xji

Ayrıca, teknik olarak daha az yetkin tanıdıklarınıza şaka yapmanın harika bir yoludur ve onları bir web sitesine girdiğinizi düşündürür.
0112

Bunu hızlı bir şekilde yapmanın başka bir yolu, dosyayı yüklemek için google drive veya her ne ise daha sonra görsel url'sini kopyalayıp içine yapıştırmaktırsrc=""
0112

Sadece makinenizde bir geliştirme web sunucusu kullanın. PHP bile dahili bir yerleşik olarak geldiğinden günümüzde kolay.
MauganRa

Yanıtlar:


64

İstemcinin yerel dosya sistemi dosyalarını talep etmesi ve ardından bunların içinde ne olduğunu bulmak için JavaScript'i kullanması bir güvenlik açığı olur.

Bunu aşmanın tek yolu, bir tarayıcıda bir uzantı oluşturmaktır. Firefox uzantıları ve IE uzantıları yerel kaynaklara erişebilir. Chrome çok daha kısıtlayıcıdır.


1
yine de, Flash, Chrome'da bile kullanıcının seçtiği her şeye erişmeyi başarır
Javier

1
Buna olumlu oy verdi çünkü nedenini cevapladı ve bazı yollar verdi. Muhtemelen yapacağım şey (ve çok fazla arka plan sağlamadığımı biliyorum) yerel görüntüleri sunmak için yerel bir web sunucusu oluşturmak. Bu şekilde tarayıcı bunları görüntüleyebilir.
PeterV

1
Flash, yerel kaynaklara yalnızca bir ilke dosyası yerinde olduğunda erişebilir veya aksi takdirde yerel moda girer ve başka şekillerde kısıtlanır.
Bjorn

2
Bu paranoyak güvenlik yalnızca bir rahatsızlıktır. <İnput type = file> alanına sahip bir formdan AJAX ile sunucuya kullanıcı dosyalarını yükleyebilirsiniz, ancak kullanıcıya iyi davranmak ve bir önizleme göstermek istiyorsanız, gidiş-dönüş yapmalı ve dosyayı önce sunucu. Önizleme görüntüsünü yerel olarak oluşturmaktan nasıl daha güvenlidir?
MKaama

2
Kullanıcıya güzel bir önizleme göstermek için önce SUNUCUYA YUVARLAK BİR GEZİ YAPMANIZ GEREKİR. AJAX ile mümkündür. Öncelikle bir dosyayı sunucuya yüklemek, önizleme görüntüsünü yerel olarak oluşturmaktan nasıl daha güvenlidir? Paranoyak güvenlik yalnızca rahatsızlık yaratır, ancak herhangi bir sorunu çözmez.
MKaama

31

"C: /localfile.jpg" yerine "file: // C: /localfile.jpg" kullanmamalı mısınız?


27

Yerel bir html sayfasına erişmediğiniz sürece tarayıcıların yerel dosya sistemine erişmesine izin verilmez. Resmi bir yere yüklemelisiniz. Html dosyasıyla aynı dizindeyse, o zaman şunu kullanabilirsiniz:<img src="localfile.jpg"/>


Aynı şeyi "/localfile.jpg" mutlak yolunu kullanarak elde etmeye çalışıyordum, ancak tarayıcı onu bir "web görüntüsü" gibi alıyor ve bulamıyor. Teşekkürler!
jmojico


6

Dürüst olmak gerekirse en kolay yol, sunucuya dosya barındırma eklemekti.

  • IIS'yi aç

  • Varsayılan Web Sitesi Altına Sanal Dizin Ekleme

    • sanal yol, tarayıcıda göz atmak istediğiniz şey olacaktır. Dolayısıyla, " sunucuAdı / resimler " i seçerseniz , http: // sunucuAdı / resimler adresine giderek ona göz atabilirsiniz.
    • Ardından fiziksel yolu C: sürücüsüne ekleyin
  • "NETWORK SERVICE" ve "IIS AppPool \ DefaultAppPool" için C: sürücüsündeki klasöre uygun izinleri ekleyin

  • Varsayılan Web Sitesini Yenile

  • Ve bitirdiniz. Artık http: //SunucunuzunAdı/whateverYourFolderNameIs/yourImage.jpg adresine giderek bu klasördeki herhangi bir görüntüye göz atabilir ve bu url'yi img src'nizde kullanabilirsiniz.

Umarım bu birine yardımcı olur


3

IE 9: Kullanıcının resmi sunucuya göndermeden önce bir göz atmasını istiyorsanız: Kullanıcı web sitesini "güvenilen Web sitesi listesine" EKLEMELİDİR.


3

yerel sürücü / klasör dosyasını göstermek için javascript'in FileReader () ve readAsDataURL (fileContent) işlevini kullanabiliriz. Değişiklik olayını görüntüye bağlayın ve ardından javascript'in showpreview işlevini çağırın. Bunu dene -

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

Chrome, konsolda "Yerel kaynak yüklemesine izin verilmiyor" hatası veriyor.
raosaeedali

1
@raosaeedali Geç yanıt için özür dilerim. Yerel sürücüden görüntüleri doğrudan HTML sayfasının img etiketine görüntülemek istiyorsak, göreceli yol vermemiz gerekir. Diğer bir çözüm ise girdi tipi bir dosyadan dosya yolunu almamız ve dosya kaynağını img etiketine atamamızdır.
Ravindra Vairagi

@RavindraVairagi, gezginde bir dosya seçmeden görüntüyü göstermenin bir yolu var mı? Komut dosyanızı kullanmayı denedim ve "Yerel kaynak yüklemeye izin verilmiyor" hatasını
Bandoleras

2

Newtang'ın güvenlik kuralları hakkındaki gözlemini bir kenara bırakırsak, sayfanızı görüntüleyen herhangi birinin doğru görsellere sahip olacağını nasıl bileceksiniz c:\localfile.jpg? Yapamazsın. Yapabileceğini düşünsen bile yapamazsın. Öncelikle, bir pencere ortamını varsayar.


Yapamazsan. Soruya fazla bağlam vermedim, biliyorum :) Ama bu durumda gerçekten bilebiliriz.
PeterV

5
Ya bir ofiste yalnızca Windows ortamlarına ve c: \ localfile.jpg konumunda doğru görüntülere sahip 10 kullanıcı bulundurmayı planlıyorsa? Bu amaçla ... sadece doğru görüntülerin orada olduğunu tam olarak bilmekle kalmayacak, aynı zamanda onları da kontrol edebilecektir.
Nazca

Bu soru geçerlidir, çünkü gereksinimi çok sınırlı bir kitleye hizmet veren bir Windows ortamı içindir. Örneğin, tek istemcinin Arduino sunucusuyla aynı LAN üzerindeki bir Windows PC olduğu Arduino tabanlı bir web sunucusu tasarlarken aynı problemle karşılaştım. Arduino, istemciye görüntü sunmada çok yavaştı, bu yüzden görüntüleri istemci makinesinin kendisinde saklamam gerekiyordu.
PrashanD

1

Yapmaya çalıştığınız şey için iki olasılık görüyorum:

  1. Bir sunucuda çalışan web sayfanızın, orijinal olarak tasarladığınız bilgisayardaki dosyayı bulmasını mı istiyorsunuz?

  2. Sayfada görüntülenen bilgisayardan almasını mı istiyorsunuz?

1. seçenek mantıklı değil :)

Seçenek 2 bir güvenlik açığı olabilir, tarayıcı bir web sayfasının (web'den sunulan) izleyicinin makinesine içerik yüklemesini yasaklar.

Kyle Hudson sana ne yapman gerektiğini söyledi, ama bu o kadar basit ki, yapmak istediğin tek şeyin bu olduğuna inanmakta zorlanıyorum.


1

Google Chrome tarayıcısını kullanıyorsanız böyle kullanabilirsiniz

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

Ancak Mozila Firefox kullanıyorsanız, "dosya" eklemeniz gerekir, örn.

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

3
Bu benim için Chrome'da işe yaramadı, ancak IE'de çalışıyor mu?
ahtapot

0

Görüntüyü de yüklemeniz, ardından sunucudaki görüntüye bağlamanız gerekir.


0

görüntünün kullanıcı tarafından seçilen bir şey olmasına ne dersiniz? Bir input: file etiketi kullanın ve ardından görüntüyü seçtikten sonra, istemci tarafındaki web sayfasında göstermek ister misiniz? Bu çoğu şey için yapılabilir. Şu anda IE için çalışmasını sağlamaya çalışıyorum, ancak tüm Microsoft ürünlerinde olduğu gibi, bu bir küme çatalı ().


0

Yerel bir web sitesini yalnızca kendiniz veya belirli istemciler için dağıtıyorsanız mklink /D MyImages "C:/MyImages", web sitesinin kök dizininde cmd'de yönetici olarak çalıştırarak bu sorunu çözebilirsiniz . Sonra html'de<img src="MyImages/whatever.jpg"> ve mklink tarafından kurulan sembolik bağ, göreli src bağlantısını C sürücünüzdeki bağlantıya bağlayacaktır. Bu sorunu benim için çözdü, bu yüzden bu soruya gelenlere yardımcı olabilir.

(Açıkçası, insanların bilgisayarlarında cmd komutlarını kolayca çalıştıramayacağınız için bu genel web sitelerinde işe yaramayacaktır)


0

Çok sayıda teknik denedim ve sonunda C # tarafında ve JS tarafında bir tane buldum. Src niteliğine fiziksel bir yol veremezsiniz, ancak base64 dizesini src to Img etiketi olarak verebilirsiniz. Aşağıdaki C # kod örneğine bakalım.

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

C # kodu

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

Umarım bu yardımcı olur


0

ile başlar file:/// ve biter filename:

<img src="file:///C:/Users/91860/Desktop/snow.jpg" alt="Snow" style="width:100%;">
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.