사용자 컴퓨터의 IMG 를 JS 나 HTML 을 사용하여 사용자에게 보여주는 방법은 무엇인가요??

Question

사용자 컴퓨터의 IMG 를 JS 나 HTML 을 사용하여 사용자에게 보여주는 방법은 무엇인가요??

예를들어서 아래와 같은 파일 주소가 있을때 서버는 모르더라도 사용자는 정확한 그 파일의 주소와 디렉토리 접근권한을 가지고 있습니다.

file:///C:/Users/NAME/Desktop/1.png

웹브라우저에 끌어다 놓기만 해도 브라우저로 띄우는것도 가능한 상황입니다.

이때 이걸 시스템이 접근하여 통제하거나 하는 일은 하나도 없고 그냥 사용자에게 View 만 이라도 해주고 싶은데 방법이 없나요???

예전에는( 한 10년전...) 에는 정확한 디렉토리와 주소만 알면 가능했던것 같기도 한데 최근 다시 보니 보안정책 업데이트인지 전혀 접근이 안되는듯 하여 질문 드립니다.

서버는 해당 파일에 대한 접근을 전혀 못해도 상관없고 그냥 보여만 줘도 괜찮습니다.

서버상에서 불가하다면 사용자가 html 을 다운로드하여 실행하는 방식도 괜찮습니다.

방법이 전혀 없을까요??

Answer 1

안녕하세요. 질문자님

html 파일 업로드를 통하여 사진 업로드를 하는 방법은

HTML 을 사용하여 사용자에게 보여주는 방법을 질문하셨군요.

FileReader

를 통해 구현하시는 방법을 추천합니다.

[ fileReader - mdn 문서 발췌]

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

해당 글이 도움이 되셨으면 좋겠습니다.

Answer 2

안녕하세요.

하실려고 하는 게 정확히는 모르겠지만 로컬 주소 (file://)로는 어렵습니다.

HTML 파일이 전달 가능하다면 이미지를 Base64 encoding으로 이미지를 전달해 줄 순 있습니다.

이미지를 문자로 변환하여 html 파일에 넣어서 보낸다고 생각하시면 될 듯 합니다.

1. 이미지를 base64 encoding 을 합니다. 프로그램 언어를 사용하셔도 되고 안된다면 포털에 검색하셔서 웹에서 지원하는 URL을 사용해도 됩니다.
아래는 제가 검색해서 나온 사이트며 이미지가 보안상 어려우면 java 등을 사용하여 base64 encoding을 하시기 바랍니다.
https://base64.guru/converter/encode/image

위 사이트를 이용하신다면 아래처럼 설정 후 "Encode image Base64" 버튼을 클릭하면 "Base64" 영역에 img 태그가 만들어 집니다.
Datatype : Local File
Local File* : 파일 선택을 누른 후 파일 선택
Output Format : HTML Image -- <img />

2. 위 사이트를 이용하신 거라면 img 태그를 html에 넣으시면 됩니다.

다른 방법으로 이미지를 base64로 인코딩한 경우에는 <img src="data:image/png;base64,인코딩된문자열" /> 로 태그를 만들어서 html에 넣으시면 됩니다.