node.js로 웹서비스 만들기 (7. 로컬 경로에 있는 이미지 보여주기)

현재 저는 제 맥북에서 node.js 웹서버 작업을 하고 있습니다. 

로컬에서 작업 시 이미지를 보여지도록 처리하기 위해서는 아래와 같은 작업이 필요합니다.

 

 

이미지 관리 폴더 생성

이미지를 관리하는 "public/image" 폴더를 만들어줍니다.

이렇게 만들어진 "public/image" 폴더를 이미지 파일들을 복사해줍니다.

 

이미지 get 기능 구현

모든 경로에서 공용으로 사용가능하도록 index.js 파일에 아래와 같은 코드를 추가합니다.

// index.js
var router = express.Router();
...
app.use(express.static('public'));

... 

router.get('/images/:imageName', function(req, res){
  var imgName = req.params.imageName;
  console.log('이미지 요청: ' + imgName);
  res.sendFile('/public/image/'+imgName);    
});

 

이미지 tag 추가

아래와 같이 HTML 파일의 필요한 부분에 아래와 같이 이미지 tag 추가합니다.

<img src="/image/site_manager.png" class="img-thumbnail" alt="manager">