Markdown 로컬이미지 삽입 문제(21.07.12 업데이트)

20.09.04 업데이트
21.03.26 ?raw=true 내용 포스트 url 첨부
21.07.12 가독성 높이도록 글 구조 수정

 

![ label ] (url주소)


기존의 웹에서 Markdown으로 삽입할 때
![test](https://github.com/MinsoftK/TIL/blob/master/Algorithm/image/2-counting_cell_01.png?raw=true)


경로로 집어넣었을 경우 (github에 올릴경우 해당 파일이 이미 업로드 되어야 한다.)
![test](./image/table.png)

 

만약 github 웹 주소로 이미지 삽입이 제대로 안된다면 맨뒤에 raw = true를 붙였는지 확인해보자. 왜 url뒤에 ?raw=true를 붙이는지 궁금하다면 아래 링크를 확인해보길 바란다.

 

최근에 github을 관리하면서 이미지 삽입에 관련되서 굉장히 스트레스를 받고 있다. 그 이유는 이미지를 github에 올린다음 그 URL을 Markdown 언어안에 집어넣어주면 이미지 생성이 되지만 파일 경로를 정했을 경우에 아래와 같이 이미지가 깨져버린다. 그래서 무엇이 문제인지 구글링을 시작했다... 하지만 다 github에서 issue를 이용한 방법 밖에 없었다. 내가 원하는 것은 위처럼 상대경로로 이미지를 업로드를 해주는 것인데 왜 안되는걸까?

markdown docs를 찾아보니 홈페이지 자체에서도 로컬주소가 아닌 URL을 집어넣게 기술 돼 있다. 상당히 불편한데 이렇게 써야하는건가...? 방법을 계속 찾아보긴할테지만 상당히 불편한 것 같다. 결국 github에 이미지를 업로드를 한뒤 해당파일의 url을 가져왔다. 아래와 같이 파일의 URL을 복사해주면 되겠다.

![table](https://github.com/MinsoftK/TIL/blob/master/DataBase/image/table.png?raw=true)

이렇게 다시 집어넣어주면 아래와 같이 정상적으로 markdown에 그림이 업로드 되는것을 확인할 수 있다. 불편하긴하지만 마크다운 문법자체가 그래서 어쩔 수 없는 것 같다. 또 파일경로 끝부분엔 ?raw=true를 붙여줘야 정상적으로 실행이 되는데 원시 html로 변환한다는 뜻인것 같다. 

아래와 같이 정상적으로 업로드가 되는 것을 확인할 수 있다.

728x90

 

총정리

상대경로를 입력한 markdown에서는 사진이 나오지만 git이나 외부에 업로드 될 때는, 로컬을 참조를 하지 못하는 것 같다. 만약 로컬의 경로를 썼는데 해당 로컬을 참조할 수 없는 경우엔 이미지 표시가 되지 않을 확률이 높다.
1. 상대경로로 사용할 경우
 github에 이미지 파일이 업로드가 돼 있는지 먼저 확인한다. 업로드 되어 있지 않다면, 업로드 후에 상대경로로 사용하자.
2. 절대경로로 사용할 경우
마찬가지로 이미지를 먼저 업로드 한 후, github에서 이미지 파일이 저장된 URL을 복사한 뒤, markdown에 넣어준다.

 

 

 

이전에 겪었던 VScode오류 상황

어제까지만해도 HTML에 그림이 표시가 되지 않았었는데 오늘은 주소가 아닌 (./images/lifecycle.png) 를 넣어도 그림이 표시가 된다. git에 업로드가 된 상태에서는 경로로 써줄 수 가 있는 것 같다. 따라서 실험을 해보았다. 

그랬더니 세상에...... 되는 경우와 안되는 경우가 있었는데 내가 정말 멍청하게도 vscode를 맹신하고 있었던 것이다아아아아.... 다른 git에서는 images 라는 디렉터리안에 이미지 파일이 있었고 문제가 생긴 git쪽에서는 image로 디렉터리 이름이 설정 돼 있었다. 그래서 s 차이가 문제를 일으킨건가...? 하고 혹시나해서 디렉터리 이름을 바꾸려 했지만 오류가 발생했다. 그래서 디렉터리를 삭제하고 새로운 images를 만들고 이미지 업로드가 되는 것을 확인 후, 다시 image로 바꾸었는데 이런 오류가 발생했다.

 

그렇다... vscode에서 인식을 못하는 경우를 생각을 못한 것이다.....  인턴때 차장님이 extension 설치나 오류시에 vscode 껐다가 켜보라고 가르쳐주신 이유를 이제야 깨달았다..... vscode 열려 있는 파일을 모두 저장 후 restart 하면 해결이 될듯....

추가적으로 "Error: EBUSY: resource busy or locked, rename ~~ 이런 오류가 발생한다면 그 해당 이미지 파일이 다른 시스템에서 참조되고 있어 vscode에서 오류가 뜰 확률이 높다!

 

 

틀린 설명이나 지식이 있으면 댓글 달아주세요 감사합니다!