<img src =“C : /localfile.jpg”>를 수행 할 수없는 이유는 무엇입니까?

98

html 파일이 로컬 (내 C 드라이브) 인 경우 작동하지만 html 파일이 서버에 있고 이미지 파일이 로컬 인 경우에는 작동하지 않습니다. 왜 그런 겁니까?

가능한 해결 방법이 있습니까?

javascript  html  filesystems  src 
— PeterV
소스
3
왜 그런 일을하고 싶은지 물어봐도 될까요?
— Boris Callens
2
@BorisCallens 예를 들어, 내 컴퓨터에 새 이미지가 있고 스테이징에 업로드하는 전체 프로세스를 거치고 싶지 않을 때 스테이징 웹 사이트에서 이미지 변경을 테스트하고 싶을 수 있습니다. 이를 수행하는 유일한 방법은 어쨌든 스테이징 대신 개발 환경에서 이미지를 변경하는 것입니다.
— xji
또한 기술적으로 유능하지 않은 지인에게 농담을하여 사용자가 웹 사이트를 해킹했다고 생각하게 만드는 좋은 방법입니다.
— 0112
이 작업을 빠르게 수행하는 또 다른 방법은 Google 드라이브 또는 기타 파일을 업로드 한 다음 이미지 URL을 복사하여 내부에 붙여 넣는 것입니다.src=""
— 0112
컴퓨터에서 개발 웹 서버를 사용하십시오. 심지어 PHP가 내장 하나되어 있기 때문에 그것은 요즘 쉽습니다.
— MauganRa

답변:

64

클라이언트가 로컬 파일 시스템 파일을 요청한 다음 JavaScript를 사용하여 파일에 무엇이 있는지 알아낼 수 있다면 보안 취약점이됩니다.

이 문제를 해결하는 유일한 방법은 브라우저에서 확장을 빌드하는 것입니다. Firefox 확장 및 IE 확장은 로컬 리소스에 액세스 할 수 있습니다. Chrome은 훨씬 더 제한적입니다.

— Bjorn
소스
1
그래도 플래시는 Chrome에서도 사용자가 선택한 모든 항목에 액세스 할 수 있습니다
— Javier
1
이유에 대한 답변과 그에 대한 몇 가지 방법을 제공했기 때문에이를 찬성했습니다. 내가 할 수있는 일은 (그리고 많은 배경 지식을 제공하지 않았다는 것을 알고 있음) 로컬 이미지를 제공 할 로컬 웹 서버를 만드는 것입니다. 이렇게하면 브라우저가이를 표시 할 수 있습니다.
— PeterV 2010
1
Flash는 정책 파일이있는 로컬 리소스에만 액세스 할 수 있습니다. 그렇지 않으면 로컬 모드로 전환되고 다른 방식으로 제한됩니다.
— Bjorn
2
이 편집증적인 보안은 단지 소란 일뿐입니다. <input type = file> 필드가있는 양식에서 AJAX를 사용하여 사용자 파일을 서버에 업로드 할 수 있지만 사용자에게 친절하고 미리보기를 표시하려면 왕복을 수행하고 파일을 먼저 서버. 미리보기 이미지를 로컬로 생성하는 것보다 어떻게 더 안전합니까?
— MKaama
2
사용자에게 멋진 미리보기를 표시하려면 먼저 서버로 왕복 이동해야합니다. AJAX로 가능합니다. 미리보기 이미지를 로컬로 생성하는 것보다 먼저 파일을 서버에 업로드하는 것이 어떻게 더 안전합니까? 편집증적인 보안은 단지 소란을 일으키지 만 문제를 해결하지는 못합니다.
— MKaama
32

"C : /localfile.jpg"대신 "file : // C : /localfile.jpg"를 사용하면 안됩니까?

— AndreDurao
소스
예,하지만이 트릭은 Windows 시스템에서만 작동합니다. Linux에서는 리소스에 대한 Symlink를 만들고 동일한 웹 페이지에 링크를 배치하고 src = "..."를 사용하여 호출해야합니다. 즉, 내가 시도한 한 "file : //"접두사는 Linux 시스템에서는 작동하지 않지만 Windows 시스템에서는 완벽하게 작동합니다.
— Power Engineering
27

로컬 HTML 페이지에 액세스하지 않는 한 브라우저는 로컬 파일 시스템에 액세스 할 수 없습니다. 이미지를 어딘가에 업로드해야합니다. html 파일과 동일한 디렉토리에 있으면 다음을 사용할 수 있습니다.<img src="localfile.jpg"/>

— 뉴탕
소스
절대 경로 "/localfile.jpg"를 사용하여 동일한 결과를 얻으려고했지만 브라우저가 "웹 이미지"처럼 받아들이고 찾지 못하는 것 같습니다. 감사!
— jmojico
6

솔직히 가장 쉬운 방법은 서버에 파일 호스팅을 추가하는 것입니다.

  • IIS 열기

  • 기본 웹 사이트 아래에 가상 디렉터리 추가

    • 가상 경로는 브라우저에서 찾고자하는 것입니다. 따라서 " serverName / images 를 선택 하면 http : // serverName / images 로 이동하여 찾아 볼 수 있습니다 .
    • 그런 다음 C : 드라이브에 물리적 경로를 추가합니다.

  • "NETWORK SERVICE"및 "IIS AppPool \ DefaultAppPool"에 대해 C : 드라이브의 폴더에 적절한 권한을 추가합니다.

  • 기본 웹 사이트 새로 고침

  • 그리고 당신은 끝났습니다. 이제 http : //yourServerName/whateverYourFolderNameIs/yourImage.jpg 로 이동하여 해당 폴더의 이미지를 찾아보고 img src에서 해당 URL을 사용할 수 있습니다.

이것이 누군가에게 도움이되기를 바랍니다.

— Foremaro
소스
3

IE 9 : 사용자가 이미지를 서버에 게시하기 전에 먼저보기를 원하는 경우 : 사용자는 웹 사이트를 "신뢰할 수있는 웹 사이트 목록"에 추가해야합니다.

— 유나이티드 4 피스
소스
3

javascript의 FileReader () 와 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>
— 라빈 드라 바 이라기
소스
Chrome에서 '로컬 리소스를로드 할 수 없음'콘솔에 오류가 발생합니다.
— raosaeedali
1
@raosaeedali 답변이 늦어서 죄송합니다. 로컬 드라이브의 이미지를 HTML 페이지의 img 태그에 직접 표시하려면 상대 경로를 제공해야합니다. 또 다른 해결책은 입력 유형 파일에서 파일 경로를 가져오고 파일 소스를 img 태그에 할당하여 코드를 업데이트하는 것입니다.
— Ravindra Vairagi
@RavindraVairagi 탐색기에서 파일을 선택하지 않고 이미지를 표시하는 방법이 있습니까? 스크립트를 사용하려고했는데 "로컬 리소스를로드 할 수 없습니다"라는 오류가 표시되지 않았지만 이미지가있는 경우 직접 인쇄하는 방법을 찾고 싶습니다.
— Bandoleras
2

보안 규칙에 대한 Newtang의 관찰은 제쳐두고 귀하의 페이지를 보는 사람이 올바른 이미지를 갖게 될지 어떻게 알 수 c:\localfile.jpg있습니까? 당신은 할 수 없습니다. 할 수 있다고 생각하더라도 할 수 없습니다. 한 가지는 Windows 환경을 전제로합니다.

— 잭 켈리
소스
당신이 할 수 없다면. 나는 질문에 많은 맥락을주지 않았다. 나는 알고있다. 그러나이 경우 우리는 실제로 알 수있다.
— PeterV 2010
5
그가 Windows 환경과 c : \ localfile.jpg에 올바른 이미지가있는 사무실에 10 명의 사용자 만있을 계획이라면 어떨까요? 이를 위해 ... 그는 올바른 이미지가 있다는 것을 알 수있을뿐만 아니라 이미지도 제어 할 수 있습니다.
— Nazca 2014 년
이 질문은 그의 요구 사항이 매우 제한된 청중에게 제공되는 Windows 환경에 대한 것이기 때문에 유효합니다. 예를 들어, Arduino 서버와 동일한 LAN에있는 Windows PC 만 클라이언트 인 Arduino 기반 웹 서버를 설계 할 때 동일한 문제가 발생했습니다. Arduino는 클라이언트에 이미지를 제공하는 데 너무 느려서 클라이언트 컴퓨터 자체에 이미지를 저장해야했습니다.
— PrashanD
1

나는 당신이하려는 일에 대해 두 가지 가능성을 봅니다.

  1. 서버에서 실행되는 웹 페이지가 원래 디자인 한 컴퓨터에서 파일을 찾기를 원하십니까?

  2. 페이지에서보고있는 PC에서 가져 오시겠습니까?

옵션 1은 의미가 없습니다. :)

옵션 2는 보안 허점이며 브라우저는 웹 페이지 (웹에서 제공됨)가 뷰어의 컴퓨터에 콘텐츠를로드하지 못하도록 금지합니다.

Kyle Hudson이 당신이해야 할 일을 말했지만, 그것은 너무 기초적이어서 이것이 당신이 원하는 전부라고 믿기가 어렵다는 것을 알게되었습니다.

— 후안 멘데스
소스
1

Google 크롬 브라우저를 사용하는 경우 다음과 같이 사용할 수 있습니다.

<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">
— 사친 드라 N. 판 데이
소스
3
크롬에서는 작동하지 않았지만 IE에서는 작동합니까?
— 문어
이것은 Linux 시스템에서는 작동하지 않지만 Windows 시스템에서는 잘 작동합니다.
— Power Engineering
1

자신 또는 특정 클라이언트를위한 로컬 웹 사이트를 배포하는 경우 mklink /D MyImages "C:/MyImages"cmd의 관리자로 웹 사이트 루트 디렉터리에서 실행하여이 문제를 해결할 수 있습니다 . 그런 다음 html에서 do <img src="MyImages/whatever.jpg">및 mklink에 의해 설정된 심볼릭 링크는 상대 src 링크를 C 드라이브의 링크와 연결합니다. 그것은 나를 위해이 문제를 해결했기 때문에이 질문에 오는 다른 사람들에게 도움이 될 수 있습니다.

(분명히 이것은 사람들의 컴퓨터에서 cmd 명령을 쉽게 실행할 수 없기 때문에 공개 웹 사이트에서는 작동하지 않습니다)

— 타 카누 바 15
소스
0

사용자가 이미지를 선택하는 것은 어떻습니까? input : file 태그를 사용한 다음 이미지를 선택한 후 클라이언트 측 웹 페이지에 표시 하시겠습니까? 그것은 대부분의 일에서 가능합니다. 지금은 IE에서 작동하도록 노력하고 있지만 모든 Microsoft 제품과 마찬가지로 클러스터 fork ()입니다.

— 타락 사신
소스
0

나는 많은 기술을 시도했고 마침내 C # 측과 JS 측에서 하나를 발견했습니다. src 속성에 물리적 경로를 제공 할 수 없지만 Img 태그에 대한 src로 base64 문자열을 제공 할 수 있습니다. 아래 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);
                            }

이것이 도움이되기를 바랍니다.

— Naveed Khan
소스
0

다음으로 시작 file:///하고 다음으로 끝납니다 filename.

<img src="file:///C:/Users/91860/Desktop/snow.jpg" alt="Snow" style="width:100%;">
— 스티브
소스
주의 :이 트릭은 Linux 시스템에서 작동하지 않습니다.
— Power Engineering
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.