multer 라이브러리 이미지 요청

우연히 메뉴수정 리펙토링을 하며 저장한 이미지를 불러올 때, 충격적인 사실을 알아냈다.

multer 설정으로 루트디렉토리에 저장한 이미지파일이 서버에서 가져오기때문에 아래 코드를 추가했다.

app.get('/uploads/:filename', (req, res) => {
  const filename = req.params.filename;
  const filePath = path.join(__dirname, 'uploads', filename);
  res.sendFile(filePath);
});

검색으로 multer 라이브러리를 이용해 이미지를 저장하는 게시글은 많다.

하지만 저장한 이미지를 불러오는 방법을 찾지 못했는데, 위에코드가 이를 해결해주었다. 그리고 당연하게도 위에 '/uploads/:filename' 경로를 Ajax url 로 요청해 해당 경로에 있는 이미지를 추적할 수 있는줄 알았다.

그런데 우연히 ajax 요청없이 src에 위에 경로를 넣었더니 이미지가 불러와졌다.

충격적인건 위에있는 경로는 ajax url 로 api 를 요청하는 경로가 아닌 이미지 태그에서 src 안에서 이미지를 요청하는 경로였던 것!

쓸데없이 중첩된 ajax 문을 줄일 수 있었다.