개발을 할 때면 이미지를 삽입해야 하는 경우가 있는데 일단 빠르게 개발을 하기 위해 예제용 이미지를 첨부하는 경우가 많다. 이미지를 html 요소에 넣는 방법은 로컬 파일에서 가져오는 방법이 있고 웹상의 cdn 주소를 이용해 가져오는 방법이 있다. 이번 포스팅에서는 손십게 sample용 이미지를 cdn 링크로 가져오는 방법을 알아보려고 한다.
Lorem Picsum :
필자가 예제용 이미지를 가져오는데 가장 많이 사용하는 사이트이다. 일반 이미지를 cdn 링크로 가져올때는 크기가 맞지않아 깨지는 경우가 존재하는데 lorem picsum 의 이미지 cdn 링크는 경로를 통해 크기를 일이이 지정할 수 있다.
예를들어
https://picsum.photos/id/237/200/300
이렇게 이미지 cdn 링크글 가져오면 가로 200, 세로 300 비율 크기의 이미지를 가져오는 것이다. 해당 링크를 그대로 img 요소의 src로 등록하면 된다.