ทำไมฉันจึงไม่สามารถ <img src =“ C: /localfile.jpg”>

Question 1

ใช้งานได้ถ้าไฟล์ html อยู่ในเครื่อง (บนไดรฟ์ C ของฉัน) แต่จะไม่ทำงานหากไฟล์ html อยู่บนเซิร์ฟเวอร์และไฟล์รูปภาพอยู่ในเครื่อง ทำไมถึงเป็นเช่นนั้น?

วิธีแก้ปัญหาที่เป็นไปได้?

Question 2

มันจะเป็นช่องโหว่ด้านความปลอดภัยหากไคลเอนต์สามารถร้องขอไฟล์ระบบไฟล์ภายในเครื่องจากนั้นใช้ JavaScript เพื่อค้นหาว่ามีอะไรอยู่ในนั้น

วิธีเดียวที่จะแก้ปัญหานี้คือสร้างส่วนขยายในเบราว์เซอร์ ส่วนขยาย Firefox และส่วนขยาย IE สามารถเข้าถึงทรัพยากรในท้องถิ่นได้ Chrome มีข้อ จำกัด กว่ามาก

Question 3

คุณไม่ควรใช้ "file: // C: /localfile.jpg" แทน "C: /localfile.jpg"?

Question 4

เบราว์เซอร์ไม่ได้รับอนุญาตให้เข้าถึงระบบไฟล์ภายในเครื่องเว้นแต่คุณจะเข้าถึงเพจ html ในเครื่อง คุณต้องอัปโหลดภาพที่ไหนสักแห่ง หากอยู่ในไดเร็กทอรีเดียวกับไฟล์ html คุณสามารถใช้<img src="localfile.jpg"/>

Question 5

C:ไม่ใช่โครงการ URI ที่รู้จัก ลองfile://c|/...แทน

Question 6

จริงๆแล้ววิธีที่ง่ายที่สุดคือการเพิ่มไฟล์โฮสติ้งไปยังเซิร์ฟเวอร์

เปิด IIS
เพิ่มไดเรกทอรีเสมือนภายใต้เว็บไซต์เริ่มต้น
- เส้นทางเสมือนจะเป็นสิ่งที่คุณต้องการเรียกดูในเบราว์เซอร์ ดังนั้นหากคุณเลือก " serverName / imagesคุณจะสามารถเรียกดูได้โดยไปที่http: // serverName / images
- จากนั้นเพิ่มเส้นทางจริงบนไดรฟ์ C:
เพิ่มสิทธิ์ที่เหมาะสมในโฟลเดอร์บนไดรฟ์ C: สำหรับ "NETWORK SERVICE" และ "IIS AppPool \ DefaultAppPool"
รีเฟรชเว็บไซต์เริ่มต้น
และคุณทำเสร็จแล้ว ตอนนี้คุณสามารถเรียกดูรูปภาพใดก็ได้ในโฟลเดอร์นั้นโดยไปที่http: //yourServerName/whateverYourFolderNameIs/yourImage.jpgและใช้ url นั้นใน img src ของคุณ

หวังว่านี่จะช่วยใครบางคนได้

Question 7

IE 9: หากคุณต้องการให้ผู้ใช้ดูภาพก่อนที่จะโพสต์ไปยังเซิร์ฟเวอร์: ผู้ใช้ควรเพิ่มเว็บไซต์ไปที่ "รายการเว็บไซต์ที่เชื่อถือได้"

Question 8

เราสามารถใช้FileReader ()ของ javascript และเป็นฟังก์ชัน readAsDataURL (fileContent)เพื่อแสดงไฟล์ไดรฟ์ / โฟลเดอร์ในเครื่อง เชื่อมโยงเหตุการณ์การเปลี่ยนแปลงกับรูปภาพจากนั้นเรียกใช้ฟังก์ชัน showpreview ของจาวาสคริปต์ ลองสิ่งนี้ -

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

Question 9

ข้อสังเกตของ Newtang เกี่ยวกับกฎความปลอดภัยนอกเหนือจากนี้คุณจะรู้ได้อย่างไรว่าใครก็ตามที่ดูเพจของคุณจะมีภาพที่ถูกต้องc:\localfile.jpg? คุณทำไม่ได้ แม้ว่าคุณคิดว่าคุณทำได้ แต่ก็ทำไม่ได้ มันคาดเดาสภาพแวดล้อม windows สำหรับสิ่งหนึ่ง

Question 10

ฉันเห็นความเป็นไปได้สองประการสำหรับสิ่งที่คุณกำลังพยายามทำ:

คุณต้องการให้หน้าเว็บของคุณทำงานบนเซิร์ฟเวอร์เพื่อค้นหาไฟล์บนคอมพิวเตอร์ที่คุณออกแบบไว้ตอนแรกหรือไม่?
คุณต้องการให้ดึงข้อมูลจากพีซีที่กำลังดูหน้าเว็บหรือไม่?

ตัวเลือกที่ 1 ไม่สมเหตุสมผล :)

ตัวเลือกที่ 2 จะเป็นช่องโหว่ด้านความปลอดภัยเบราว์เซอร์ห้ามไม่ให้หน้าเว็บ (แสดงจากเว็บ) โหลดเนื้อหาบนเครื่องของผู้ชม

Kyle Hudson บอกคุณว่าคุณต้องทำอะไร แต่นั่นเป็นเรื่องพื้นฐานมากที่ฉันคิดว่ามันยากที่จะเชื่อว่านี่คือทั้งหมดที่คุณต้องการทำ

Question 11

หากคุณใช้เบราว์เซอร์ Google chrome คุณสามารถใช้เช่นนี้

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

แต่ถ้าคุณใช้ Mozila Firefox คุณจะต้องเพิ่ม "file" เช่น

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

Question 12

คุณต้องอัปโหลดภาพด้วยจากนั้นจึงเชื่อมโยงไปยังภาพบนเซิร์ฟเวอร์

Question 13

แล้วการให้รูปภาพเป็นสิ่งที่ผู้ใช้เลือกล่ะ? ใช้แท็ก input: file จากนั้นหลังจากเลือกภาพแล้วให้แสดงบนหน้าเว็บไคลเอนต์? ซึ่งทำได้เกือบทุกอย่าง ตอนนี้ฉันกำลังพยายามทำให้มันทำงานกับ IE แต่เช่นเดียวกับผลิตภัณฑ์ไมโครซอฟท์ทั้งหมดมันเป็น cluster fork ()

Question 14

หากคุณกำลังปรับใช้เว็บไซต์ในพื้นที่สำหรับตัวคุณเองหรือลูกค้าบางรายเท่านั้นคุณสามารถแก้ไขปัญหานี้ได้โดยเรียกใช้mklink /D MyImages "C:/MyImages"ในไดเรกทอรีรากของเว็บไซต์ในฐานะผู้ดูแลระบบใน cmd จากนั้นใน html, do <img src="MyImages/whatever.jpg">และลิงก์สัญลักษณ์ที่สร้างโดย mklink จะเชื่อมต่อลิงก์ src สัมพัทธ์กับลิงก์บนไดรฟ์ C ของคุณ มันช่วยแก้ปัญหานี้ให้ฉันได้ดังนั้นจึงอาจช่วยคนอื่น ๆ ที่เจอคำถามนี้ได้

(เห็นได้ชัดว่าสิ่งนี้ใช้ไม่ได้กับเว็บไซต์สาธารณะเนื่องจากคุณไม่สามารถเรียกใช้คำสั่ง cmd บนคอมพิวเตอร์ของผู้อื่นได้อย่างง่ายดาย)

Question 15

ฉันได้ลองใช้เทคนิคมากมายและในที่สุดก็พบหนึ่งใน C # side และ JS Side คุณไม่สามารถกำหนดเส้นทางทางกายภาพให้กับแอตทริบิวต์ src ได้ แต่คุณสามารถกำหนดสตริง base64 เป็นแท็ก src ให้กับ Img ได้ มาดูตัวอย่างโค้ด C # ด้านล่าง

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

รหัส 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);
                            }

หวังว่านี่จะช่วยได้

Question 16

เริ่มต้นด้วยfile:///และลงท้ายด้วยfilenameควรใช้งานได้:

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