1. HTML 문법으로

Absolute URL (절대 경로) - url과 baseurl을 앞에 붙여준다.

<img data-action="zoom" src='/assets/img/image.png' alt='absolute'>
<!-- result : http://blog.jaeyoon.io/my-baseurl/assets/img/image.png -->

Relative URL (상대 경로) - baseurl을 앞에 붙여준다.

<img data-action="zoom" src='/assets/img/image.png' alt='relative'>
<!-- result : /my-baseurl/assets/img/image.png -->


  1. 마크다운(MD) 문법으로

Jekyll이 사용하는 마크다운-HTML 컨버터인 kramdown 하에서는 아래 네 가지 방식이 모두 허용된다.

- ![Image Alt 텍스트](https://kkang123.github.io/assets/img/image.png )
- ![Image Alt 텍스트](http://blog.jaeyoon.io/assets/img/image.png)
- ![Image Alt 텍스트](/assets/img/image.png)
- ![Image Alt 텍스트](/assets/img/image.png)

클래스명, alt값 등은 {:property = “value”}형태로 붙여주면 된다.

![Image Alt 텍스트](/assets/img/image.png){:class="img-responsive"}


  1. SASS/SCSS 파일 안에서 이미지 불러오기

YAML Front Matter 블록이 정의된 main.scss 파일에서 리퀴드 문법으로 사이트 URL 변수를 정의해준다.

// main.scss
$baseurl: "";
@import "custom";

그리고 임포트되는 기타 SCSS파일들에서는 이 변수를 사용하여 작업하면 된다.

// custom.scss
background-image: url("#{$baseurl}/assets/img/image.png");