파이썬 플라스크 이미지 삽입하기

2019. 4. 25. 06:30

파이썬에는 여러가지 웹개발 프레임워크가 있다. 플라스크는 단순하고 직관적인 구조로 이해하기도 쉽고 활용하기도 좋다. 단순한 웹페이지를 만들고 서비스하기에는 장고보다 낫다. 하지만 아무리 간단해도 조금은 배워야 한다.

오늘은 플라스크를 이용해 이미지를 삽입하는 방법에 대해서 알아보도록 하겠다.


플라스크_이미지_삽입



이전 포스팅에서 CSS파일을 static file로 HTML에 추가하는 방법에 대해서 알아보았다.
( 참조: 파이썬 플라스크(flask)에서 CSS 사용하기 )


이미지도 동일하게 static file로 추가할 수 있다. 하지만, CSS파일과 다르게 이미지는 파일이 변경될 수도 있다. 그래서 이미지를 static file로 넣는 방법과 변경될 수 있게 넣는 방법을 모두 알아보도록 하겠다.


1. static file로 넣기

static 파일로 넣는 방법은 CSS파일을 넣는 방법과 동일하다. 우선 image파일은 이전 포스팅에서 만들어 놓은 css폴더 밑에 image라는 폴더를 추가하여 저장하였다. 다음에는 렌더링할 HTML파일에 해당 위치를 참조하여 이미지가 보여지도록 하면 된다.


즉, 파이썬 코드는 수정할 게 없고 HTML파일만 수정하면 된다.


1) 파이썬 코드

별로 바뀐게 없다.

1
2
3
4
5
6
7
8
9
10
11
12
13
# coding = utf-8
 
from flask import Flask, render_template 
 
app = Flask(__name__)
 
@app.route("/")
def home():
    return render_template('img_static.html')
 
if __name__ == "__main__":
    app.run()
 
cs


2) HTML파일 (img_static.html)

1
2
3
4
5
6
7
8
9
<!doctype html>
<html>
  <head>
  </head>
  <body>
    <img src="{{ url_for('static', filename='image/test.jpeg') }}">
  </div>
  </body>
</html>
cs


6행에 보면 img태그를 활용하고, src에 이미지의 위치만 넣으면 된다. url_for함수를 이용하여 자동으로 image파일의 위치를 잡도록 하였다.


아래와 같이 이미지가 잘 삽입된 것을 확인할 수 있다.


이미지_삽입결과1

( 이미지 삽입 결과 )



2. img태그에 별도 지정해서 넣기

이미지가 계속 바뀌어야 된다면 어떻게 할까? 위와 같은 방법으로는 한 번 삽입한 이미지를 바꿀 수가 없다. 이미지를 바꾸려면, 파라미터로 이미지파일의 이름을 넘겨줘야 한다.

render_template함수를 이용해서 HTML에 파라미터를 넘기는 것은 가능하지만, src =의 뒤에 위치가 따옴표 사이로 들어가서 그런지 인식이 되지 않는다. 예를 들어 <img src="{{ image_file }}"> 이라고 HTML에 입력하면 , image_file이 파라미터로 전달되지 않는다. {{ image file }}을 이미지 위치로 그대로 인식하여 에러가 발생한다.

파라미터로 인식시키기 위해 {%if True%} ~ {% enddif %} 사이에 입력하니 작동이 된다. if True는 의미가 없지만, 파이썬 코드에서 전달한 파라미터가 인식될 수 있도록 삽입해 주었다고 보면 된다.


1) 파이썬 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# coding = utf-8
 
from flask import Flask, render_template 
 
 
app = Flask(__name__)
 
@app.route("/")
def home():
    return render_template('img_test.html', image_file="image/test1.png")
 
if __name__ == "__main__":
    app.run()
 
cs


10행에 보면, home함수의 return에 HTML을 렌더링하고, image_file을 파라미터로 넘긴다. 다른 이미지파일로 바꾸고 싶다면, image_file의 값을 다른 값으로 변경하면 된다.


2) HTML파일 (img_test.html)

1
2
3
4
5
6
7
8
9
10
<!doctype html>
<html>
  <head>
  </head>
  <body>
    {% if True %}
    <img src="{{ url_for('static', filename=image_file) }}">
    {% endif %}
  </body>
</html>
cs


6행에 보면 {% if True %} ~ {% endif %}로 감싸고, srC뒤에 url_for함수를 이용해 자동으로 파일의 위치를 잡도록 하였다.


아래와 같이 이미지가 잘 삽입된 것을 확인할 수 있다.


이미지_삽입결과2



오늘은 이렇게 플라스크에서 이미지를 삽입하는 방법에 대해서 알아보았다. static file로 고정해서 넣을 수도 있고, img태그에 파라미터를 전달하는 방법을 통해 원하는 이미즈를 별도로 지정할 수도 있었다. 상황에 따라 맞는 방법을 사용하면 되겠다. 다음 포스팅에서는 버튼을 처리하는 방법에 대해서 알아보고자 한다.


오픈API를 사용하면 다양한 재미있는 일들을 해 볼 수 있다. 파이썬을 활용한 오픈API 사용이 궁금하다면 아래 글을 참조해보자.
(참조: 오픈API를 활용한 사례는 어떤 것들이 있을까?)


댓글()