मैं क्यों नहीं कर सकता <img src = "C: /localfile.jpg">?


98

यह काम करता है यदि html फ़ाइल स्थानीय है (मेरी C ड्राइव पर), लेकिन नहीं अगर html फ़ाइल सर्वर पर है और छवि फ़ाइल स्थानीय है। ऐसा क्यों है?

किसी भी संभव workarounds?


3
क्या मैं पूछ सकता हूं कि आप ऐसा क्यों करना चाहेंगे?
बोरिस ने

2
@BorisCallens उदाहरण के लिए, मैं अपनी स्टेजिंग वेबसाइट पर एक छवि के बदलाव का परीक्षण करना चाह सकता हूं, जब मेरे पास अपनी मशीन पर नई छवि है और मैं स्टेजिंग पर अपलोड करने की पूरी प्रक्रिया से नहीं गुजरना चाहता। ऐसा लगता है कि ऐसा करने का एकमात्र तरीका किसी भी रास्ते के बजाय विकास के माहौल में छवि को बदलना होगा।
xji

यह आपके कम तकनीकी रूप से सक्षम परिचितों पर एक मजाक खेलने का एक शानदार तरीका है, जिससे उन्हें लगता है कि आपने एक वेबसाइट में हैक कर लिया है।
0112

ऐसा करने का एक और तरीका यह है कि फाइल को कहने के लिए अपलोड करें, Google ड्राइव या फिर जो भी छवि url कॉपी करें और उसे अंदर पेस्ट करेंsrc=""
0112

बस अपनी मशीन पर एक विकास वेबसर्वर का उपयोग करें। यह आजकल आसान है क्योंकि यहां तक ​​कि PHP भी एक में निर्मित के साथ आता है।
MauganRa

जवाबों:


64

यह एक सुरक्षा भेद्यता होगी यदि ग्राहक स्थानीय फ़ाइल सिस्टम फ़ाइलों का अनुरोध कर सकता है और फिर जावास्क्रिप्ट का उपयोग करके यह पता लगा सकता है कि उनमें क्या है।

इसके आस-पास एकमात्र तरीका एक ब्राउज़र में एक एक्सटेंशन का निर्माण करना है। फ़ायरफ़ॉक्स एक्सटेंशन और IE एक्सटेंशन स्थानीय संसाधनों तक पहुंच सकते हैं। क्रोम बहुत अधिक प्रतिबंधक है।


1
अभी भी, फ़्लैश कुछ भी उपयोगकर्ता का चयन करने का प्रबंधन करता है, यहां तक ​​कि
जेवियर

1
इसे उकेरा गया क्योंकि इसने क्यों का उत्तर दिया और इसके चारों ओर कुछ तरीके दिए। जो मैं करने की संभावना होगी (और मुझे पता है कि मैंने बहुत पृष्ठभूमि नहीं दी थी) स्थानीय छवियों को बनाने के लिए एक स्थानीय वेबसर्वर बनाया गया है। इस तरह ब्राउज़र उन्हें प्रदर्शित कर सकता है।
पीटरवी

1
फ़्लैश केवल नीतिगत फ़ाइल के साथ स्थानीय संसाधनों का उपयोग कर सकता है या अन्यथा यह स्थानीय मोड में चला जाता है और अन्य तरीकों से प्रतिबंधित है।
ब्योर्न 13

2
यह पैरानॉयड सुरक्षा केवल एक गड़बड़ी है। आप AJAX के साथ <इनपुट प्रकार = फ़ाइल> फ़ील्ड के साथ एक सर्वर से उपयोगकर्ता फ़ाइलों को अपलोड कर सकते हैं, लेकिन यदि आप उपयोगकर्ता के लिए अच्छा होना चाहते हैं और पूर्वावलोकन दिखाना चाहते हैं, तो आपको गोल यात्रा करना होगा और फ़ाइल को फ़ाइल पर अपलोड करना होगा। पहले सर्वर। यह स्थानीय रूप से पूर्वावलोकन छवि बनाने से अधिक सुरक्षित कैसे है?
एमकेआमा

2
उपयोगकर्ता को एक अच्छा पूर्वावलोकन दिखाने के लिए, आपको पहले सर्वर के लिए एक ट्रॉय ट्राइप करना होगा। यह AJAX के साथ संभव है। स्थानीय रूप से पूर्वावलोकन छवि बनाने की तुलना में सबसे पहले सर्वर पर फ़ाइल अपलोड करना कैसे सुरक्षित है? पैरानॉयड सुरक्षा केवल अशांति पैदा करती है, लेकिन किसी भी समस्या का समाधान नहीं करती है।
एमकेआमा

32

क्या आपको "C: /localfile.jpg" के बजाय "फ़ाइल: // C: /localfile.jpg" का उपयोग नहीं करना चाहिए?


हाँ, लेकिन यह ट्रिक विंडोज सिस्टम में ही काम करेगी। लिनक्स के तहत आपको संसाधन के लिए एक सिमलिंक बनाना होगा और लिंक को उसी वेब पेज पर रखना होगा और इसे src = "..." का उपयोग करके कॉल करना होगा। दूसरे शब्दों में जहाँ तक मैंने "फाइल: //" की कोशिश की है, उपसर्ग लिनक्स सिस्टम के तहत काम नहीं करेगा, जबकि विंडोज सिस्टम के तहत पूरी तरह से काम करेगा।
पावर इंजीनियरिंग

27

जब तक आप स्थानीय HTML पृष्ठ तक नहीं पहुँचते, तब तक ब्राउज़र को स्थानीय फ़ाइल सिस्टम तक पहुँचने की अनुमति नहीं है। आपको कहीं न कहीं इमेज अपलोड करनी होगी। यदि यह html फ़ाइल के समान निर्देशिका में है, तो आप उपयोग कर सकते हैं<img src="localfile.jpg"/>


मैं निरपेक्ष पथ "/localfile.jpg" का उपयोग करके उसी को प्राप्त करने की कोशिश कर रहा था, लेकिन लगता है कि ब्राउज़र इसे "वेब छवि" की तरह लेता है और इसे नहीं पाता है। धन्यवाद!
जम्मोजिको


6

ईमानदारी से सबसे आसान तरीका सर्वर में फ़ाइल होस्टिंग जोड़ना था।

  • IIS खोलें

  • डिफ़ॉल्ट वेब साइट के तहत एक वर्चुअल निर्देशिका जोड़ें

    • वर्चुअल पथ वह होगा जो आप ब्राउज़र में ब्राउज़ करना चाहते हैं। इसलिए यदि आप " serverName / images " चुनते हैं तो आप http: // serverName / images पर जाकर इसे ब्राउज़ कर पाएंगे
    • फिर C: ड्राइव पर भौतिक पथ जोड़ें
  • C: फ़ोल्डर पर उपयुक्त अनुमतियाँ जोड़ें "NETWORK SERVICE" और "IIS AppPool \ DefaultAppool" के लिए ड्राइव करें

  • डिफ़ॉल्ट वेब साइट को ताज़ा करें

  • और आपने कल लिया। अब आप http: //yourServerName/whateverYourFolderNameIs/yourImage.jpg पर नेविगेट करके उस फ़ोल्डर में किसी भी छवि को ब्राउज़ कर सकते हैं और अपने img src में उस url का उपयोग कर सकते हैं

आशा है कि यह किसी की मदद करता है


3

IE 9: यदि आप चाहते हैं कि उपयोगकर्ता सर्वर पर पोस्ट करने से पहले छवि पर एक नज़र डालें: उपयोगकर्ता को वेबसाइट को "विश्वसनीय वेबसाइट सूची" में जोड़ना चाहिए।


3

हम जावास्क्रिप्ट के FileReader () का उपयोग कर सकते हैं और यह स्थानीय ड्राइव / फ़ोल्डर फ़ाइल दिखाने के लिए readAsDataURL (fileContent) फ़ंक्शन है। ईवेंट को छवि में बदलें और फिर जावास्क्रिप्ट के शो-पॉइंट फ़ंक्शन को कॉल करें। इसे इस्तेमाल करे -

<!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 कंसोल में "स्थानीय संसाधन लोड करने की अनुमति नहीं है" में एक त्रुटि फेंकता है।
अगस्त

1
@raosaeedali देर से प्रतिक्रिया के लिए क्षमा करें। यदि हम सीधे HTML पेज के हमारे img टैग में स्थानीय ड्राइव से छवियों को प्रदर्शित करना चाहते हैं तो हमें सापेक्ष पथ देने की आवश्यकता है। एक अन्य समाधान यह है कि हमें एक इनपुट प्रकार की फ़ाइल से फ़ाइल पथ मिलता है और फ़ाइल स्रोत को img टैग में असाइन किया जाता है।
रवींद्र वैरागी

@RavindraVairagi क्या एक्सप्लोरर में कोई फ़ाइल चुनने के बिना छवि प्रदर्शित करने का कोई तरीका है? मैंने आपकी स्क्रिप्ट का उपयोग करने की कोशिश की है और मुझे "स्थानीय संसाधन को लोड करने की अनुमति नहीं है" की त्रुटि नहीं मिली, लेकिन मैं छवि को सीधे प्रिंट करने का एक तरीका खोजना चाहता हूं, अगर यह मौजूद है ...
Bandoleras

2

एक तरफ सुरक्षा नियमों के बारे में न्यूटैंग का अवलोकन, आपको कैसे पता चलेगा कि जो कोई भी आपके पृष्ठ को देखता है, उसकी सही छवियां होंगी c:\localfile.jpg? आप नहीं कर सकते। अगर आपको लगता है कि आप कर सकते हैं, तो भी आप नहीं कर सकते। यह एक चीज के लिए, एक विंडोज़ वातावरण निर्धारित करता है।


जब तक आप कर सकते हैं। मैंने प्रश्न में ज्यादा संदर्भ नहीं दिया है, मुझे पता है :) लेकिन इस मामले में हम वास्तव में जान सकते हैं।
पीटरवी

5
क्या होगा यदि वह केवल एक कार्यालय में 10 उपयोगकर्ता होने की योजना बना रहा है, जिसमें सभी विंडोज़ के वातावरण और c: \ localfile.jpg पर सही चित्र हैं। उस अंत तक ... वह पूरी तरह से न केवल यह जान पाएगा कि सही चित्र हैं, बल्कि उन्हें भी नियंत्रित करते हैं।
नाज़का

यह प्रश्न मान्य है क्योंकि उसकी आवश्यकता एक बहुत ही सीमित दर्शकों की सेवा के लिए, एक विंडोज़ वातावरण के लिए है। उदाहरण के लिए, मैं एक ही समस्या में भाग गया जब मैं एक Arduino आधारित वेब सर्वर डिजाइन कर रहा था जहां एकमात्र क्लाइंट Arduino सर्वर के समान LAN पर एक विंडोज़ पीसी था। Arduino क्लाइंट के लिए छवियों की सेवा करने में बहुत धीमा था इसलिए मुझे क्लाइंट मशीन पर छवियों को संग्रहीत करने की आवश्यकता थी।
प्रातः

1

मैं दो संभावनाएं देखता हूं कि आप क्या करने की कोशिश कर रहे हैं:

  1. आप अपना वेबपृष्ठ चाहते हैं, जो सर्वर पर चल रहा है, उस फ़ाइल को कंप्यूटर पर ढूंढने के लिए जिसे आपने मूल रूप से डिज़ाइन किया था?

  2. आप इसे उस पीसी से प्राप्त करना चाहते हैं जो पृष्ठ पर देख रहा है?

विकल्प 1 सिर्फ मतलब नहीं है :)

विकल्प 2 एक सुरक्षा छेद होगा, ब्राउज़र दर्शकों की मशीन पर सामग्री लोड करने से वेब पेज (वेब ​​से सेवा) पर प्रतिबंध लगाता है।

काइल हडसन ने आपको बताया कि आपको क्या करने की आवश्यकता है, लेकिन यह इतना बुनियादी है कि मुझे विश्वास करना मुश्किल है कि यह सब आप करना चाहते हैं।


1

यदि आप Google क्रोम ब्राउज़र का उपयोग करते हैं तो आप इस तरह का उपयोग कर सकते हैं

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

लेकिन अगर आप मोज़िला फ़ायरफ़ॉक्स का उपयोग करते हैं, तो आपको "फ़ाइल" पूर्व जोड़ना होगा।

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

3
क्रोम में मेरे लिए काम नहीं किया, लेकिन यह IE में काम करता है?
ऑक्टोपस

यह लिनक्स सिस्टम के तहत काम नहीं करेगा, लेकिन विंडोज सिस्टम में ठीक काम करेगा।
पावर इंजीनियरिंग

1

यदि आप किसी स्थानीय वेबसाइट को केवल अपने लिए या कुछ क्लाइंट्स के लिए तैनात कर रहे हैं, तो आप इसके लिए mklink /D MyImages "C:/MyImages"cmd में एक व्यवस्थापक के रूप में वेबसाइट रूट डायरेक्टरी में चल सकते हैं । फिर HTML में, करें <img src="MyImages/whatever.jpg">और mklink द्वारा स्थापित प्रतीकात्मक लिंक आपके सी ड्राइव पर लिंक के साथ रिश्तेदार src लिंक को कनेक्ट करेगा। इसने मेरे लिए इस मुद्दे को हल किया, इसलिए यह दूसरों को मदद कर सकता है जो इस सवाल पर आते हैं।

(जाहिर है कि यह सार्वजनिक वेबसाइटों के लिए काम नहीं करेगा क्योंकि आप लोगों के कंप्यूटर पर आसानी से cmd कमांड नहीं चला सकते हैं)


0

आपको छवि को असवेल अपलोड करने की आवश्यकता है, फिर सर्वर पर छवि से लिंक करें।


0

उपयोगकर्ता द्वारा चयनित छवि के बारे में क्या होगा? एक इनपुट का उपयोग करें: फ़ाइल टैग और फिर छवि का चयन करने के बाद, इसे क्लाइंटसाइड वेबपेज पर दिखाएं? यह ज्यादातर चीजों के लिए उल्लेखनीय है। अभी मैं IE के लिए काम करने की कोशिश कर रहा हूं, लेकिन सभी Microsoft उत्पादों के साथ, यह एक क्लस्टर फोर्क () है।


0

मैंने बहुत सारी तकनीकों की कोशिश की है और अंत में C # पक्ष और JS साइड में एक पाया है। आप src विशेषता के लिए एक भौतिक पथ नहीं दे सकते, लेकिन आप बेस 64 स्ट्रिंग को src के रूप में Img टैग में दे सकते हैं। नीचे दिए गए C # कोड उदाहरण में देखें।

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

सी # कोड

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

आशा है कि यह मदद करेगा


0

के साथ शुरू होता है file:///और अंत में filenameकाम करना चाहिए:

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

ध्यान रखें: यह चाल लिनक्स सिस्टम में काम नहीं करेगी।
पावर इंजीनियरिंग
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.