[Django] image 업로드 시 실수 하는 부분 체크! django 에서 사진이 안불러져요.

Django를 공부하다보면 image를 업로드하고 이를 html을 통해 표현할때 잘 안불러와질때가 있어요. 

 

 

 

 

분명 img태그에서 속성을 잘 넣었습니다. 

src는 feed.name.profile_picture로 url 경로를 의미하죠.

 

이 url경로는 Models.py 를 통해 잘 저장되어있구요. 

 

우리 지난번 포스팅에서 봤듯이 settings.py에 media경로와 static경로 설정도 문제없이 잘 했었죠?

 

 

 

잘 설정되어있죠?

url은 /media/abc.png 로 나오겠죠?

 

그리고 django 의 admin페이지를 들어가볼께요.

 

저의 profile_picture에는 test 어쩌구.png로 잘 들어가있어요.

 

그렇다면 src를 재대로 써주었고 설정도 되었고, 그렇다면 재대로 이미지가 나와야됩니다. 

 

자 한번 볼까요?

 

 

 

아니 이게 무슨일잊.......

 

무슨일이지.... 왜 안나오지?

재대로 분명 설정 했는데 말이죠. 

한번 상황을 볼까요?

 

서버에서 뱉은 메시지들을 확인해봅니다. 

 

으음? not found라고 나오네요? 왜그럴까요?

앞에 보니깐.. 이상한 /feed/짜장면_ 어쩌구..

/feed/test 어쩌구.. 

여기서 공통점은 앞에 feed 라는 url이 붙어있는걸 볼 수 있어요. 

 

저희가 원하는건 /media/test 어쩌구인데 말이죠. 

 

 

이 가설이 맞는지 한번 이미지 로드 주소를 확인해봅시다. 

자 이렇게 해주면 이미지 주소가 보이겠죠?

 

 

역시나 feed에서 이미지들을 찾고있는걸 볼 수 있어요. 

 

 

자 이 feed를 미디어로 변경해봅시다. 

 

재대로 뜨는걸 확인할 수 있어요. 

 

이를 해결하기 위해서 미봉책을 써보도록 할께요. 

 

 

 

이가 없으면 잇몸으로 씹으라고 했습니다. 

직접 미디어 경로로 만들어주면 되지 않을까 싶었어요.

 

보이시죠? ../media/ 라고 경로를 직접 입력해주었답니다. 

 

그랬더니?

 

 

 

 

 

역시 잘 뜨네요

 

이렇게 해결하면 됩니다. ......

 

이렇게 구현하면 얼마나 돌팔이 프로그래머입니까? 

 

그러면 어떻게 해결해야되지....

 

그리고 이 방법의 문제점이 또 있습니다. 

 

 

자, form 이 있다고 한다면 어떻게 될까요?

 

form을 통해 데이터를 서버쪽으로 전송 한 후 주소는 /feed/ 에서 /feed/comment/로 변하게 되겠죠?

 

그러면 어떻게 되는지 확인해봅시다.

 

 

 

 

역시나... 망했습니다. 

 

이미지가 불러와지지 않았네요.

 

 

 

 

이미지를 찾는 경로가 역시 예상한대로 feed/media가 붙어버렸네요.

comment가 사라지고 feed가 다시 부활했습니다. 

 

골치아프네요 이걸 하나하나 그럼 이럴경우는 a로 , 

저럴경우에는 b로 처리해야될까요?

 

 

 

먼저 원인 파악부터 할께요

 

먼저 그냥 사진이 저장된 경로를 저장된 부분이에요.

<img class="profile_img" src="{{feed.name.profile_picture}}">

 

 

이 방법은 단순히 미디어가 저장된 경로를 불러오는거에요.

만약 미디어가 저장된 경로 앞에 url 이 변하게 된다면 위의 현상이 계속 발생하게 됩니다. 

 

우리가 원하는건 Settings.py 에서 설정한대로 /media/로 시작하는 경로가 필요한거잖아요.

그럴때 쓰는 해결 방법은 참 간단합니다. 

<img class="profile_img" src="{{feed.name.profile_picture.url}}">

 

자, 뒤에 url을 붙여준다면 media 폴더 부터 시작하는 상대경로를 받을 수 있답니다. 

이를 통해서 url이 아무리 변하더라도 media로 시작되는 경로부터 시작된 사진을 불러올수 있게됩니다. 

 

 

이렇게 제가 겪어온 문제와 시행착오 , 그리고 미봉책과 최후의 해결방법까지 알아보았습니다. 

 

다음에는 이런 실수  절대 하지 않겠죠 ^^?

 

다음번에도 좋은 포스팅으로 찾아뵙겠습니다. 

 

감사합니다.