[Electron] img 태그 src="file://~" 경로에 존재하는 파일이 로드되지 않는 경우 해결 방법

[Electron] img 태그 src="file://~" 경로에 존재하는 파일이 로드되지 않는 경우 해결 방법

---

 

 

1. 오류

WebRoot 경로 및 하위 폴더에 존재하는 이미지는 상대 경로로 입력하여 이미지를 불러올 수 있지만,

로컬에 존재하는 파일 또는 다른 서버에 존재하는 파일을 로드할 경우, 절대 경로로 입력해 주어야 한다.

 

C:/나 D:/ 등 마운트된 디렉토리는 정상적으로 접근해서 이미지를 로드했지만,

외부(다른) 서버에 존재하는 파일을 파일은 존재한다고 출력은 되나, 이미지를 불러오지 못했다.

아래 코드를 실행해 보면 image1은 이미지가 보이지만, image2는 이미지가 보이지 않았다.

const fs = require("fs");

var image1 = document.createElement("img");
var image2 = document.createElement("img");

// 이미지 경로
var path1 = "C:/Users/itinerant/Pictures/test.jpg";
var path2 = "//외부서버주소/Pictures/test.jpg";

// 파일 존재 여부 확인
if (fs.existsSync(path1) === false) {
	console.log("path1 파일을 찾을 수 없습니다.");
}
if (fs.existsSync(path2) === false) {
	console.log("path2 파일을 찾을 수 없습니다.");
}

// 이미지 경로 입력
image1.src = path1;
image2.src = path2;

Developer Tools에 표시된 오류는 다음과 같았다.

//외부서버주소/Pictures/test.jpg:1 GET file://외부서버주소/Pictures/test.jpg net::ERR_FILE_NOT_FOUND

 

 

2. 해결방법

해결 방법은 image 파일을 dataURi(base64)로 변경해 준 값으로 src에 입력하면 된다.

 * dataURI를 사용할 경우, 캐시를 path를 입력한 것 보다 더 많이 잡아 먹는다고 한다.

 

npm 에 `datauri`라는 모듈을 사용하면 된다.

$ npm install --save-dev datauri

사용 방법은 간단하다.

페이지에 상세한 예제도 나와 있다.

const Datauri = require('datauri');
const datauri = new Datauri();

var image = document.createElement("img");
datauri.encode(파일, (err, content) => {
	if (err) {
    	console.log("파일을 찾을 수 없습니다.");
    }	
    image.src = content;
});