NodeJS 이미지 경로를 인식하지 못해요?

Nodejs로 웹앱을 처음 만들어 볼때 나는 왜 이미지가 안뜨고 에러가 나오지? 하는 경우가 있습니다. 그래서 오늘은 nodejs 이미지 경로 실패에 대한 해결방법에 대해 살펴봤습니다.

nodejs 이미지 경로 실패 상황

이미지가 액박이 되면서 안뜨고 콘솔창에 찾을 수 없다고 나옵니다.

server.js 파일입니다.

const express = require('express');
const app = express();

app.use(express.static('views'));
  // 바로 이부분

app.get('/',function(요청,응답){
  // 응답.send('여기는 나의 작업용 페이지입니다.');
  응답'/idx.html');
});

app.get('/write.html',(req,res)=>{
  res.sendFile(__dirname + '/write.html');
});

app.listen(8000, function(){
  console.log('Listening at 8000');
});
Code language: PHP (php)

이미지, html파일, css파일등 을 모아 놓은 폴더로 views 폴더를 만들었습니다. 그리고 위의 코드처럼 express에서 이 파일들을 사용하기 위해 app.use(express.static(‘views’)); 선언을 해 두었습니다.

그리고나서 브라우저로 나타날 write.html 파일에 아래와 같이 이미지를 링크하는 코드를 걸어두었습니다.

  <img src="/views/img/idxTitleh2.png">
Code language: HTML, XML (xml)

왜 이미지가 안 뜰까요? 그건 아래에서 설명할께요.

이미지 경로 인식 실패 이유와 해결방법

위의 server.js 에서 정적파일을 선언할때 ‘views’ 폴더를 지정했기 때문에 이것을 <img> 태그 같은 곳에서 사용할 때 views라는 폴더명을 다시 지정해줄 필요가 없기 때문입니다.

아래와 같이 수정해야 합니다.

// 변경 전   
<img src="/views/img/idxTitleh2.png">
Code language: HTML, XML (xml)

// 변경 후  
<img src="img/idxTitleh2.png">
Code language: HTML, XML (xml)

위와 같이 바꿔주면 이미지가 잘 뜰 것입니다. 오늘은 아주 간단하게 이미지가 안뜨는 이유에 대해서 알아봤습니다.