티스토리 뷰

Python

[웹 앱프로그래밍] 파이썬 플라스크(Python Flask) static 리소스 활용

I like simple code 2020. 5. 15. 00:06
728x90

templates 에 있는 HTML 에서 이미지를 띄워 봅니다.

URL 주소가 있는 이미지는 html  태그에서 img src="http://이미지주소" 이런식으로 하면 되지만 Flask에서 우리 프로젝트 내부에 있는 이미지를 이용 하기 위해서는 이미지 저장 위치는 static 폴더(디렉토리) 안에 있어야 합니다.

필자는 프로젝트 폴더(test)안에 static\img 위치에 dora.png 파일이름의 이미지를 준비 했습니다.

 

templates 폴더 안에 myimage.html 파일을 하나 생성 해서 아래와 같이 소스를 작성 합니다.

<!DOCTYPE html>
<html>
<body>

<h2>도라에몽</h2>
<img src="dora.png">

</body>
</html>

그리고 app.py 파일에는 저 html 을 부르는 route 하나를 만듭니다.

@app.route('/dora')
def myimage():
    return render_template("myimage.html")

역시 이미지는 뜨지를 않네요. 왜냐면 dora.png는 static\img 안에 있기 때문에 경로를 다 써줘야 합니다.

위 이미지 소스를 static/img/ 를 붙여서 브라우저에서 새로 고침을 해봅니다.

 

잘 뜨네요. 이미지가 static\img 폴더 안에 있기 때문에 경로를 써줘야 합니다.

이전에 배운 url_for 함수를 이용해서 불러 봅시다.

{{ 여기에 코드를 작성합니다. }}

이것이 가능 한 이유는 Jinja2 템플릿 엔진이 사용되기 때문입니다.  {{ }} 안에 작성하는 코드의 형태는 요즘 많이 볼 수 있는데요. spring boot 템플릿 중에 mustache 나 handlebars 에도 사용 됩니다. 자바스크립트에도 mustache 가 있습니다. https://mustache.github.io/ 참고

 

Jinja2 템플릿을 이용 해서 리소스를 부르는 방법은 아래와 같습니다.

<!DOCTYPE html>
<html>
<body>
<h2>도라에몽</h2>
<img src={{ url_for('static', filename='img/dora.png') }}>
</body>
</html>

이미지 말고도 CSS, JS 같은 파일도 다 저런식으로 불러서 사용 가능 합니다.

이렇게 사용되는 이유는 정적인 주소 보다는 동적이게 사용하기 위함이라고 지난 글에서 설명을 했었습니다.

만약 외부에 링크를 걸기 위해서는 이전 글에서 리다이렉션에 대해서 배웠는데 location.href="/naver" 를 예를 들었는데

위 이미지를 누르면 페이지 이동 시키기 위해 a 태그로 링크를 걸어 보겠습니다.

아래 코드를 작성 합니다.

<!DOCTYPE html>
<html>
<body>

<h2>도라에몽</h2>
<a href="/hello/도라에몽">
<img src={{ url_for('static', filename='img/dora.png') }}>
</a>

</body>
</html>

이미지를 클릭 하면 "/hello/도라에몽" 이 불려 지면서 이전에 작성했던 hello 도라에몽이라는 결과가 나올 것입니다.

저 링크도 url_for 를 이용해서 변경 하면 되겠네요. 아래 코드로 변경 해봅니다.

<변수>를 보낼 때는 아래와 같이 작성 할 수 있습니다.

url_for (함수이름, 파라미터명='보낼데이터')

<!DOCTYPE html>
<html>
<body>

<h2>도라에몽</h2>
<a href={{ url_for('hello', name='도라에몽') }}>
<img src={{ url_for('static', filename='img/dora.png') }}>
</a>
</body>
</html>

 

'Python' 카테고리의 다른 글

[웹 앱프로그래밍] Python freeze 명령과 vscode에서 Github에 Flask 프로젝트 업로드  (0) 2020.05.15
[웹 앱프로그래밍] Git을 설치 하고 Github에 업로드 하기  (0) 2020.05.15
[웹 앱프로그래밍] 파이썬 플라스크(Python Flask) errorhandler, abort  (0) 2020.05.15
[웹 앱프로그래밍] 파이썬 플라스크(Python Flask) redirect, url_for  (0) 2020.05.09
[웹 앱프로그래밍] 파이썬 플라스크(Python Flask) Route, URL  (0) 2020.05.09
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함