Tại sao tôi không làm được <img src = “C: /localfile.jpg”>?

96

Nó hoạt động nếu tệp html là cục bộ (trên ổ C của tôi), nhưng không hoạt động nếu tệp html nằm trên máy chủ và tệp hình ảnh là cục bộ. Tại sao vậy?

Bất kỳ giải pháp thay thế có thể?

javascript  html  filesystems  src 
— PeterV
nguồn
3
Tôi có thể hỏi tại sao bạn lại muốn làm một điều như vậy không?
— Boris Callens
2
@BorisCallens Ví dụ: tôi có thể muốn kiểm tra sự thay đổi của một hình ảnh trên trang web dàn dựng của mình, khi tôi có hình ảnh mới trên máy của riêng mình và tôi không muốn thực hiện toàn bộ quá trình tải lên dàn dựng. Có vẻ như cách duy nhất để làm điều đó là thay đổi hình ảnh trong môi trường phát triển thay vì dàn dựng.
— xji
Đó cũng là một cách tuyệt vời để đùa cợt những người quen kém về mặt kỹ thuật của bạn, khiến họ nghĩ rằng bạn đã xâm nhập vào một trang web.
— 0112
Một cách khác để làm điều này một cách nhanh chóng là để tải lên các tập tin để nói, Google Drive hoặc bất cứ điều gì sau đó sao chép url hình ảnh và dán nó bên trongsrc=""
— 0112
Chỉ cần sử dụng một máy chủ web phát triển trên máy của bạn. Ngày nay thật dễ dàng vì ngay cả PHP cũng được tích hợp sẵn.
— MauganRa

Câu trả lời:

64

Sẽ là một lỗ hổng bảo mật nếu khách hàng có thể yêu cầu các tệp hệ thống tệp cục bộ và sau đó sử dụng JavaScript để tìm ra những gì trong đó.

Cách duy nhất để giải quyết vấn đề này là tạo một tiện ích mở rộng trong trình duyệt. Các phần mở rộng của Firefox và phần mở rộng của IE có thể truy cập các tài nguyên cục bộ. Chrome hạn chế hơn nhiều.

— Bjorn
nguồn
1
vẫn, đèn flash quản lý để truy cập bất cứ điều gì người sử dụng chọn, ngay cả trong Chrome
— Javier
1
Đã ủng hộ điều này vì nó đã giải đáp lý do tại sao và đưa ra một số cách giải quyết vấn đề đó. Những gì tôi có thể làm (và tôi biết tôi không cung cấp nhiều thông tin cơ bản) là tạo một máy chủ web cục bộ để cung cấp hình ảnh cục bộ. Bằng cách đó, trình duyệt có thể hiển thị chúng.
— PeterV
1
Flash chỉ có thể truy cập các tài nguyên cục bộ với một tệp chính sách tại chỗ hoặc nếu không nó sẽ chuyển sang chế độ cục bộ và bị hạn chế theo những cách khác.
— Bjorn
2
An ninh hoang tưởng này chỉ là một sự xáo trộn. Bạn CÓ THỂ tải tệp người dùng lên máy chủ bằng AJAX từ một biểu mẫu có trường <input type = file>, nhưng nếu bạn muốn tốt với người dùng và hiển thị bản xem trước, bạn PHẢI thực hiện một lượt và tải tệp lên máy chủ đầu tiên. Làm thế nào nó an toàn hơn tạo hình ảnh xem trước cục bộ?
— MKaama
2
Để hiển thị cho người dùng một bản xem trước đẹp mắt, trước tiên BẠN PHẢI THỰC HIỆN MỘT CHUYẾN ĐI TRÒN ĐẾN MÁY CHỦ. Điều đó hoàn toàn có thể với AJAX. Làm cách nào để tải tệp lên máy chủ trước tiên an toàn hơn việc tạo hình ảnh xem trước cục bộ? Sự an ninh hoang tưởng chỉ tạo ra sự xáo trộn, nhưng không giải quyết được vấn đề gì.
— MKaama
31

bạn không nên sử dụng "file: // C: /localfile.jpg" thay vì "C: /localfile.jpg"?

— AndreDurao
nguồn
27

Các trình duyệt không được phép truy cập vào hệ thống tệp cục bộ trừ khi bạn đang truy cập một trang html cục bộ. Bạn phải tải lên hình ảnh ở đâu đó. Nếu nó nằm trong cùng thư mục với tệp html, thì bạn có thể sử dụng<img src="localfile.jpg"/>

— Newtang
nguồn
Tôi đã cố gắng đạt được điều tương tự bằng cách sử dụng đường dẫn tuyệt đối "/localfile.jpg" nhưng có vẻ như trình duyệt coi nó giống như một "hình ảnh web" và nó không tìm thấy nó. Cảm ơn!
— jmojico
6

Thành thật mà nói, cách dễ nhất là thêm lưu trữ tệp vào máy chủ.

  • Mở IIS

  • Thêm một thư mục ảo trong trang web mặc định

    • đường dẫn ảo sẽ là những gì bạn muốn duyệt trong trình duyệt. Vì vậy, nếu bạn chọn " serverName / images, bạn sẽ có thể duyệt đến nó bằng cách truy cập http: // serverName / images
    • Sau đó, thêm đường dẫn vật lý trên ổ C:

  • Thêm các quyền thích hợp vào thư mục trên ổ C: cho "DỊCH VỤ MẠNG" và "IIS AppPool \ DefaultAppPool"

  • Làm mới trang web mặc định

  • Và bạn đã hoàn thành. Bây giờ, bạn có thể duyệt đến bất kỳ hình ảnh nào trong thư mục đó bằng cách điều hướng đến http: //yourServerName/w AnythingYourFolderNameIs/yourImage.jpg và sử dụng url đó trong img src

Hy vọng điều này sẽ giúp ai đó

— foremaro
nguồn
3

IE 9: Nếu bạn muốn người dùng xem hình ảnh trước khi đăng nó lên máy chủ: Người dùng nên THÊM trang web vào "danh sách Trang web đáng tin cậy".

— United4Peace
nguồn
3

chúng ta có thể sử dụng FileReader () của javascript và hàm readAsDataURL (fileContent) của nó để hiển thị tệp ổ đĩa / thư mục cục bộ. Liên kết sự kiện thay đổi thành hình ảnh sau đó gọi hàm showpreview của javascript. Thử đi -

<!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
nguồn
Chrome gặp lỗi trong bảng điều khiển "Không được phép tải tài nguyên cục bộ".
— raosaeedali
1
@raosaeedali Xin lỗi vì phản hồi muộn. Nếu chúng ta muốn hiển thị trực tiếp hình ảnh từ ổ đĩa cục bộ vào thẻ img của trang HTML thì chúng ta cần cung cấp đường dẫn tương đối. Một giải pháp khác là chúng tôi lấy đường dẫn tệp từ tệp loại đầu vào và gán nguồn tệp cho thẻ img vì điều này tôi đã cập nhật mã.
— Ravindra Vairagi
@RavindraVairagi có cách nào để hiển thị hình ảnh mà không cần chọn tệp trong trình thám hiểm không? Tôi đã cố gắng sử dụng kịch bản của bạn và tôi không thu được các lỗi của "Không được phép tải tài nguyên địa phương" nhưng tôi muốn tìm một cách để in trực tiếp hình ảnh, nếu nó tồn tại ...
— Bandoleras
2

Quan sát của Newtang về các quy tắc bảo mật, làm thế nào bạn sẽ biết rằng bất kỳ ai xem trang của bạn sẽ có hình ảnh chính xác tại c:\localfile.jpg? Bạn không thể. Ngay cả khi bạn nghĩ rằng bạn có thể, bạn không thể. Nó giả định một môi trường cửa sổ, vì một điều.

— Jack Kelly
nguồn
Trừ khi bạn có thể. Tôi không đưa ra nhiều ngữ cảnh trong câu hỏi, tôi biết :) Nhưng trong trường hợp này chúng ta thực sự có thể biết.
— PeterV
5
Điều gì sẽ xảy ra nếu anh ta chỉ có kế hoạch có 10 người dùng trong một văn phòng mà tất cả đều có môi trường cửa sổ và hình ảnh chính xác tại c: \ localfile.jpg. Cuối cùng ... anh ấy sẽ hoàn toàn có thể không chỉ biết rằng những hình ảnh chính xác đang ở đó mà còn kiểm soát chúng.
— Nazca
Câu hỏi này hợp lệ vì yêu cầu của anh ấy là dành cho môi trường cửa sổ, phục vụ một lượng khán giả rất hạn chế. Ví dụ: tôi gặp phải vấn đề tương tự khi tôi đang thiết kế một máy chủ web dựa trên Arduino trong đó máy khách duy nhất là một máy tính Windows trên cùng một mạng LAN với máy chủ Arduino. Arduino quá chậm trong việc cung cấp hình ảnh cho máy khách nên tôi cần phải lưu trữ hình ảnh trên chính máy khách.
— PrashanD
1

Tôi thấy có hai khả năng cho những gì bạn đang cố gắng làm:

  1. Bạn muốn trang web của mình, chạy trên máy chủ, tìm thấy tệp trên máy tính mà bạn đã thiết kế nó ban đầu?

  2. Bạn muốn lấy nó từ máy tính đang xem tại trang?

Lựa chọn 1 không có ý nghĩa :)

Tùy chọn 2 sẽ là một lỗ hổng bảo mật, trình duyệt cấm một trang web (được cung cấp từ web) tải nội dung trên máy của người xem.

Kyle Hudson đã nói với bạn những gì bạn cần phải làm, nhưng điều đó quá cơ bản đến mức tôi khó tin rằng đây là tất cả những gì bạn muốn làm.

— Juan Mendes
nguồn
1

nếu bạn sử dụng trình duyệt Google chrome, bạn có thể sử dụng như thế này

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

Nhưng nếu bạn sử dụng Mozila Firefox, bạn cần thêm "tập tin" ex.

<img src="file:E://bulbpro/pic_bulboff.gif"   width="150px" height="200px">
— Sachindra N. Pandey
nguồn
3
Điều đó không hoạt động đối với tôi trong chrome, nhưng nó hoạt động trong IE?
— bạch tuộc
0

Bạn cần tải hình ảnh lên, sau đó liên kết đến hình ảnh trên máy chủ.

— Kyle Hudson
nguồn
0

Còn việc để hình ảnh được người dùng lựa chọn thì sao? Sử dụng thẻ input: file và sau khi họ chọn hình ảnh, hãy hiển thị hình ảnh đó trên trang web phía máy khách? Điều đó có thể làm được cho hầu hết mọi thứ. Hiện tại, tôi đang cố gắng làm cho nó hoạt động cho IE, nhưng cũng như với tất cả các sản phẩm của microsoft, nó là một cluster fork ().

— Fallenreaper
nguồn
0

Nếu bạn đang triển khai một trang web cục bộ chỉ cho chính mình hoặc một số khách hàng nhất định, bạn có thể giải quyết vấn đề này bằng cách chạy mklink /D MyImages "C:/MyImages"trong thư mục gốc của trang web với tư cách là quản trị viên trong cmd. Sau đó, trong html, do <img src="MyImages/whatever.jpg">và liên kết tượng trưng được thiết lập bởi mklink sẽ kết nối liên kết src tương đối với liên kết trên ổ C của bạn. Nó đã giải quyết vấn đề này cho tôi, vì vậy nó có thể giúp những người khác có câu hỏi này.

(Rõ ràng điều này sẽ không hoạt động đối với các trang web công cộng vì bạn không thể chạy lệnh cmd trên máy tính của mọi người một cách dễ dàng)

— takanuva15
nguồn
0

Tôi đã thử rất nhiều kỹ thuật và cuối cùng đã tìm thấy một kỹ thuật trong C # side và JS Side. Bạn không thể cung cấp một đường dẫn vật lý cho thuộc tính src nhưng bạn có thể cung cấp chuỗi base64 dưới dạng thẻ src to Img. Hãy xem ví dụ mã C # bên dưới.

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

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

Hy vọng điều này sẽ giúp

— Naveed Khan
nguồn
0

bắt đầu bằng file:///và kết thúc bằng filenamenên hoạt động:

<img src="file:///C:/Users/91860/Desktop/snow.jpg" alt="Snow" style="width:100%;">
— Steve
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.