파이썬에는 여러가지 웹개발 프레임워크가 있다. 플라스크는 단순하고 직관적인 구조로 이해하기도 쉽고 활용하기도 좋다. 단순한 웹페이지를 만들고 서비스하기에는 장고보다 낫다. 하지만 아무리 간단해도 조금은 배워야 한다.
오늘은 플라스크를 이용해 이미지를 삽입하는 방법에 대해서 알아보도록 하겠다.
이전 포스팅에서 CSS파일을 적용하는 법은 알아보면서, static file을 사용했다. 이미지도 동일하게 static file로 추가할 수 있다. 하지만 CSS파일과 다르게 이미지는 파일이 변경될 수도 있다. 그래서 이미지를 static file로 넣는 방법과 변경될 수 있게 넣는 방법을 모두 알아보겠다. CSS 파일 적용하는 방법은 아래 포스팅을 참고하기 바란다.
Recommendation 포스팅
1. static file로 넣기
static 파일로 넣는 방법은 CSS파일을 넣는 방법과 동일하다.
먼저 image파일을 저장할 폴더를 만든다. 필자는 이전 포스팅에서 만들어 놓은 css폴더 밑에 image라는 폴더를 추가했다.
다음 해당 폴더에 사용할 이미지 파일을 넣는다.
마지막으로 렌더링할 HTML파일에 해당 위치를 참조하여 이미지가 보여지도록 하면 된다.
파이썬 코드는 이전에 작성한 것에서 수정할 내용이 없다. HTML파일만 수정하면 된다.
1) 파이썬 코드
# 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()
2) HTML파일 (img_static.html)
<!doctype html>
<html>
<head>
</head>
<body>
<img src="{{ url_for('static', filename='image/test.jpeg') }}">
</div>
</body>
</html>
6행을 보자. img태그를 활용하고, src에 이미지의 위치만 넣으면 된다. url_for함수를 이용하여 자동으로 image파일의 위치를 잡도록 하였다.
아래와 같이 이미지가 잘 삽입된 것을 확인할 수 있다.
2. img태그에 별도 지정해서 넣기
이미지가 계속 바뀌어야 된다면 어떻게 할까? 위와 같은 방법으로는 한 번 삽입한 이미지를 바꿀 수가 없다. 이미지를 바꾸려면, 파라미터로 이미지파일의 이름을 넘겨줘야 한다.
render_template함수를 이용해서 HTML에 파라미터를 넘기는 것은 가능하지만, src =의 뒤에 위치가 따옴표 사이로 들어가서 그런지 인식이 되지 않는다. 예를 들어 <img src="{{ image_file }}"> 이라고 HTML에 입력하면 , image_file이 파라미터로 전달되지 않는다. {{ image file }}을 이미지 위치로 그대로 인식하여 에러가 발생한다.
파라미터로 인식시키기 위해 {%if True%} ~ {% enddif %} 사이에 입력하니 작동이 된다. if True는 의미가 없지만, 파이썬 코드에서 전달한 파라미터가 인식될 수 있도록 삽입해 주었다고 보면 된다.
1) 파이썬 코드
# 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()
10행을 보자. home함수의 return에 HTML을 렌더링하고, image_file을 파라미터로 넘긴다. 다른 이미지파일로 바꾸고 싶다면, image_file의 값을 다른 값으로 변경하면 된다.
2) HTML파일 (img_test.html)
<!doctype html>
<html>
<head>
</head>
<body>
{% if True %}
<img src="{{ url_for('static', filename=image_file) }}">
{% endif %}
</body>
</html>
6행을 보자. {% if True %} ~ {% endif %}로 감싸고, srC뒤에 url_for함수를 이용해 자동으로 파일의 위치를 잡도록 하였다.
아래와 같이 이미지가 잘 삽입된 것을 확인할 수 있다.
오늘은 이렇게 플라스크에서 이미지를 삽입하는 방법에 대해서 알아보았다. static file로 고정해서 넣을 수도 있고, img태그에 파라미터를 전달하는 방법을 통해 원하는 이미즈를 별도로 지정할 수도 있었다. 상황에 따라 맞는 방법을 사용하면 되겠다. 다음 포스팅에서는 버튼을 처리하는 방법에 대해서 알아보고자 한다.
'파이썬 > 웹사이트 개발' 카테고리의 다른 글
| 파이썬 flask development 모드 실행하는 2가지 방법은?! (0) | 2022.05.22 |
|---|---|
| 파이썬 플라스크 웹페이지 만들기 후기 - 전역변수를 사용하지 말자! (0) | 2022.04.14 |
| 파이썬 플라스크 사용자 입력 받는 2가지 방법 - GET과 POST 알아보기! (0) | 2022.04.13 |
| 파이썬 플라스크(flask) 내부 링크 만들기 - urlfor함수 사용하기! (0) | 2022.04.12 |
| 파이썬애니웨어(pythonanywhere) 웹페이지 폴더 경로 설정하는 방법은?! (0) | 2022.04.10 |
| 파이썬 플라스크 웹페이지 개발 쉽게 하는 방법은?! (0) | 2022.04.08 |
| 파이썬 플라스크(flask) CSS 적용하기! (0) | 2022.04.07 |
| 파이썬 장고(django) 설치 및 실행하는 방법은?! (0) | 2022.01.21 |
