Img태그

next/image1) 기본 사용 example img next.js에서는 image를 로드할 수 있도록 모듈을 제공해준다. img을 사용하려면 src에 public에 있는 파일을 쓰거나 로컬 사이트의 주소를 가져와서 사용이 가능하다.페이지에 이미지가 보이지 않았는데, 이미지를 로드하는 경우가 있다. 이 경우에는 미리 이미지 파일을 로드하면 네트워크 낭비가 된다. 그래서코드를 사용하면 네트워크를 절약할 수 있다.loading="lazy"2) 장점img태그를 사용한 것과 next/image태그를 가져와 이미지를 불러온 것을 비교해보자. Network탭에 들어가서 비교해봤을 때 확실히 차이가 난다.img next/imagetypejpegwebpsize68b5kb→표로 비교를..

1. settings.py에 파일 경로 추가하기STATIC_URL = 'static/'STATICFILES_DIRS = [ BASE_DIR / 'static',]static폴더에 image파일을 사용하기 위해서 static폴더를 등록해준다.폴더는 이렇게 되어 있어야 static폴더 하위에 있는 이미지 파일을 사용할 수 있다.2. templates에 img 추가하기그리고 내 경우에 templates에 있는 html파일에 바로 이미지를 추가하고자 한다.1) static 파일 사용함을 공지하기{% load static %}img태그보다 위에 static 파일을 사용한다고 지정해줘야 한다.2) img태그 경로 설정하기그럴 경우 img태그를 만들어 src에 바로 static폴더 경로를 추가해준다.