[JavaScript] image refresh 오류

WEB/JavaScript

S0PH1A 2019. 5. 9. 12:36

웹에서 같은 url(src)를 갖는 이미지를 재로드 하면

변경된 이미지가 아닌 변경 전 즉, 이전 이미지를 불러온다.

예를들어,

A라는 이미지를 웹에서 불러온 후, A 이미지를 바꿀 경우.

전체 페이지를 새로고침하거나 웹을 재시작하지 않고, 이미지만 부분 새로고침 할 경우

A 이미지는 변경된 이미지가 아닌 이전 이미지가 보여진다.

아마 캐시에 쌓아둔 듯 하다.

처음엔 Electron 언어 자체의 문제인줄 알고,

아래와 같이 cache를 삭제해 보았지만 효과가 없었고,

console로 cache를 확인해 보니 캐시는 항상 비워져 있었다.

var remote = require('remote'); 
var win = remote.getCurrentWindow(); 
win.webContents.session.clearCache(function(){ 
    //some callback. 
});

Electron의 캐시가 아니고 웹 자체의 캐시에 쌓이는 듯 하다.

그래서 이미지를 불러올 때 path에 "?고유값" 형식의 cachebreaker 를 추가하니 해결되었다.

img.src = "http://localhost/image.jpg?" + new Date().getTime();

* 테스트 코드 사용 방법 (npm필요)

1. git clone

2. npm 패키지 설치

npm install

3. 일렉트론 실행

electron .

4. finder.js 의 item.dataset.path 부분에 cachebreaker를 수정해 보면 된다.