Flask 앱에 이미지 표시
이 설명을 통해 웹 페이지에 이미지를 추가하는 방법과 Flask 앱에서 여러 이미지를 업로드하거나 표시하는 방법을 배웁니다.
Flask 앱에 이미지 표시
이 섹션에서는 웹 페이지에 이미지를 업로드하고 첫 번째 단계는 정적 및 템플릿이라는 두 개의 초기 디렉토리를 만드는 것입니다. static 폴더 안에 이미지를 저장할 새 디렉토리를 생성합니다.
다음 단계는 static 폴더 안에 생성한 IMG 폴더의 주소를 가져오는 것입니다. 따라서 os 라이브러리를 가져와 IMG_FOLDER라는 새 변수에 IMG 폴더 경로를 저장하는 데 사용해야 합니다.
IMG_FOLDER = os.path.join("static", "IMG")
이 주소를 애플리케이션 구성 업로드 폴더로 전달해야 합니다. 따라서 UPLOAD_FOLDER 내부로 이동하여 이미지를 보고 싶은 주소를 지정해야 합니다.
app.config["UPLOAD_FOLDER"] = IMG_FOLDER
다음 단계에서는 UPLOAD_FOLDER를 사용하여 웹 페이지에 표시하려는 이미지 이름과 함께 경로를 결합합니다. 이 주소를 Display_IMG() 함수 내의 Flask_Logo 변수에 저장합니다.
Flask_Logo = os.path.join(app.config["UPLOAD_FOLDER"], "flask-logo.png")
다음으로 render_template() 내부에 인수를 정의하고 Flask_Logo 변수를 값으로 전달해야 합니다.
from flask import Flask, render_template
import os
app = Flask(__name__)
IMG_FOLDER = os.path.join("static", "IMG")
app.config["UPLOAD_FOLDER"] = IMG_FOLDER
@app.route("/")
def Display_IMG():
Flask_Logo = os.path.join(app.config["UPLOAD_FOLDER"], "flask-logo.png")
return render_template("index.html", user_image=Flask_Logo)
if __name__ == "__main__":
app.run(debug=True)
이제 templates 폴더로 이동하여 index.html 파일을 만들고 이 파일 안에 기본 HTML 코드를 작성해야 합니다. render_template()에서 정의한 img 태그의 user_image 변수만 전달합니다.
다음은 이 예제의 HTML 파일에 사용된 소스 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Worl!</title>
</head>
<body>
<h1>Hello World!</h1>
<center><h3>Flask Logo</h3><img src="{{ user_image }}" alt="Mike" height="240px" width="300px"></center>
</body>
</html>
이 앱을 실행하면 이미지가 제대로 표시되는 것을 볼 수 있습니다.
Flask 앱에 여러 이미지 표시
이제 IMG 폴더에서 여러 이미지를 추가하고 모든 이미지를 표시하는 방법을 보여드릴 것이므로 이미지 목록을 만드는 것으로 시작하겠습니다. listdir() 함수를 사용하여 디렉토리의 모든 자산을 보유할 함수 내부에 이 목록을 생성하고 목록 이름은 IMG_LIST가 됩니다.
IMG_LIST = os.listdir("static/IMG")
이제 모든 이미지에 대한 루프를 만들고 목록 이해를 사용하여 IMG_LIST라는 동일한 변수에 저장합니다.
from flask import Flask, render_template
import os
app = Flask(__name__)
IMG_FOLDER = os.path.join("static", "IMG")
app.config["UPLOAD_FOLDER"] = IMG_FOLDER
@app.route("/")
def Display_IMG():
IMG_LIST = os.listdir("static/IMG")
IMG_LIST = ["IMG/" + i for i in IMG_LIST]
return render_template("index.html", imagelist=IMG_LIST)
if __name__ == "__main__":
app.run(debug=True)
다음 단계는 HTML 파일을 변경하는 것입니다. 하나씩 전달하는 대신 여러 이미지 목록인 imagelist 변수를 사용하여 루핑을 통해 표시합니다.
이제 img 태그를 넣고 이 태그 안에 url_for 태그를 사용하여 정적 파일을 가져옵니다. url_for()는 두 개의 속성을 갖습니다. 하나는 정적이고 두 번째는 파일 이름이며 루프를 통해 반복하는 항목 i를 전달합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Worl!</title>
</head>
<body>
<h1>The Multiple Images</h1>
{% for i in imagelist %}
<img src = "{{ url_for('static', filename=i)}}">
{% endfor %}
</body>
</html>
서버를 실행하고 브라우저로 이동하면 여기에 표시된 여러 이미지를 볼 수 있습니다.
Hello! I am Salman Bin Mehmood(Baum), a software developer and I help organizations, address complex problems. My expertise lies within back-end, data science and machine learning. I am a lifelong learner, currently working on metaverse, and enrolled in a course building an AI application with python. I love solving problems and developing bug-free software for people. I write content related to python and hot Technologies.
LinkedIn