[vue.js-express] 저장된 이미지 불러오기 및 이미지 URL만들기

저장된 이미지를 불러오는 방법.

프론트에서 미리보기 버튼을 클릭 => 백엔드에서 저장된 이미지 주소보냄.

아래와 같이 명시해주면 public 폴더안에 있는 폴더를 url로 보낼 수가 있다.

//app.js

app.use(express.static('public'));

라우터에서 url을 붙여주고 이미지 이름을 같이 넣어서 send로 보내준다.

//router.js

router.get('/preview', async (req, res, next)=>{
	const imgUrl = "http://localhost:3000/images/"
	result = imgUrl+"저장된 이미지명" //imgUrl+"kitty.png"
	res.send(result); 
}

받는 쪽(프론트)에서는 HTTP통신이므로 ,결과물의 data로 받으면 된다.

   await NoticePopupSettingService.previewPopup(item)
                .then(result => {                   
                   this.imageUrlGroup = result.data;        

                })