[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;
});
'WEB > Electron' 카테고리의 다른 글
[Electron] 빌드(build) 하기 ( electron-builder ) (0) | 2019.04.29 |
---|---|
[Electron] build 시 unresolved modules 오류 해결 방법 (0) | 2019.04.26 |
[Electron] HTML에 다른 HTML 파일을 include하여 사용하기 (0) | 2019.04.16 |
[Electron] 탐색기 여는 방법 (0) | 2019.04.08 |
[Electron] database 연결하기 (0) | 2019.04.06 |
[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;
});
'WEB > Electron' 카테고리의 다른 글
[Electron] 빌드(build) 하기 ( electron-builder ) (0) | 2019.04.29 |
---|---|
[Electron] build 시 unresolved modules 오류 해결 방법 (0) | 2019.04.26 |
[Electron] HTML에 다른 HTML 파일을 include하여 사용하기 (0) | 2019.04.16 |
[Electron] 탐색기 여는 방법 (0) | 2019.04.08 |
[Electron] database 연결하기 (0) | 2019.04.06 |