static 이미지 삽입
정적파일 폴더 경로
정적파일은 페이지를 만들 때 쓰임이 이미 정해져 있는 css, jpg, js파일 등을 말한다.
django에서는 settings.py에서 STATIC_URL = '/static/'로 지정되어 있기 때문에 static 폴더를 인식한다.
static 폴더를 만들 때는 appname/static/appname 이런식으로 static폴더를 만들고 그 안에 앱 이름으로 된 폴더를 한 번 더 만들어주는게 정석인데, 코드가 확장되어서 앱 개수가 점점 늘어난다면, django에서 어떤 앱의 static인지 인식하기가 곤란해지기 때문
{% load static %}
#코드 가장 위에 적용
{% static 'appname/css/list_review.css' %}
이런 식으로 접근한다. 저 경로는 정확히 appname/static/appname/css/filename.css 인데 static 포함한 앞 부분은 생략되는 것
[STATICFILES_DIRS]는 우리가 생성한 [blogapp] 안에 [static] 디렉토리에 'static file'들을 지정해놓았다는 것을 알려주기 위함입니다.
[STATIC_ROOT]는 장고에서는 하나의 장고 프로젝트에서 흩어져있는 'static file'들을 한 곳으로 모으는데, 이것은 프로젝트 디렉토리에서 [static] 디렉토리에 모을 것이라는 의미입니다.
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'blogapp', 'static')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
작업이 끝났으면 터미널을 열어 static file들을 한 곳으로 모아주는 명령어를 입력해야 합니다.
[Alt]+[F12]를 눌러 터미널을 열어 명령어를 입력합니다.
python manage.py collectstatic
get_static_prefix :static 태그 내에서 변수를 이용하기 위해서 사용
static 태그 내에는 변수가 존재할 수 없어서, 만약
<img src="{% static 'appname/images/{{review.themeRevImage}}' %}">
이런식으로 작성하면 {{}}내부 부분을 콘솔로 확인했을 시 encode되어 이미지가 깨지게 된다. 때문에 get_static_prefix를 붙여줘야 정상출력된다.
<img class="profileImg" src="{% get_static_prefix %}{{review.themeRevImage}}"/>
이미지를 업로드 받는 모델
모델의 인스턴스를 다음과 같이 생성하면, 이용자가 업로드한 이미지가 themeImages라는 폴더 안에 저장된다. 이 폴더는 app 바깥쪽, manage.py가 있는 경로에 생성된다.
themeRevImage = models.ImageField(upload_to='themeImages', height_field=None, width_field=None,blank=True)
나는 static폴더 안에 모든 이미지들이 들어가도록 만들고 싶었으므로 upload_to='static/appname/images/themeImages'로 위치를 바꿔주었는데, 이랬더니 폴더가 정상적으로 생성이 되고 이미지들도 업로드가 되었는데, 웹페이지를 개발할 때 확인해보니 이미지가 아예 표시되지 않았다.
임시 방편으로 바깥에 폴더가 생성되게 만든 후 최종본을 static폴더 안에 드래그앤 드랍으로 직접 끌어넣었더니 이번에는 문제없이 표시되었다.이를 보면 경로상에 문제는 없는 것 같은데 원인을 알 수가 없다.
*해결방안을 찾아서 업로드 할 예정
참조블로그
[정적파일] https://opentutorials.org/module/4034/24663
Author And Source
이 문제에 관하여(static 이미지 삽입), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@nunbobae/static-이미지-삽입저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)