프로젝트 진행중 이미지를 화면에 출력하는 부분이 있었는데 처음에는 잘 출력되다가 일정시간이 지나면 위와 같이 이미지가 로드되지 않는 문제가 발생하였다. 개발자도구를 확인해보니 Failed to load resource:net::ERR_INCOMPLETE 라는 에러메세지가 있었다.
구글링해본 결과 코드에 문제가 있어 인코딩하는 과정에서 오류가 발생한것이라고 한다. 그래서 이미지를 출력하는 코드를 다시한번 살펴보았고 문제가 되는 부분을 발견하였다.
app.get('/Public/Upload/:filename', function(req, res) {
fs.readFile(__dirname + `/Public/Upload/${req.params.filename}`, function(err, data) {
if (err) throw err;
else {
res.writeHead(200, {'Content-Type': 'image/png'});
res.write(data);
}
})
});이미지를 출력하는 부분을 위와 같이 작성하였는데 res.write() 다음에 res.end()를 통해 응답을 종료해주지 않은것이었다.
app.get('/Public/Upload/:filename', function(req, res) {
fs.readFile(__dirname + `/Public/Upload/${req.params.filename}`, function(err, data) {
if (err) throw err;
else {
res.writeHead(200, {'Content-Type': 'image/png'});
res.write(data);
res.end(); //추가
}
})
});위와 같이 수정해주었더니 문제가 해결되었다.
[참고]
화이팅!