diff --git a/myproject/app.py b/myproject/app.py
index 7465f8789f7f539dff6b51f0b4fc73184eee348e..21166020fcca818bc97a15515b28efcab691b20b 100644
--- a/myproject/app.py
+++ b/myproject/app.py
@@ -5,7 +5,14 @@ app = Flask(__name__, template_folder='template')
@app.route('/helloworld')
def helloworld():
- return render_template('helloworld.html')
+
+ d = {
+ "username": "Justin Biber",
+ "env": "Development",
+ "avater": "https://git.selfmade.ninja/uploads/-/system/user/avatar/7411/avatar.png?width=800"
+ }
+
+ return render_template('helloworld.html', data=d )
if __name__ == '__main__':
app.run(debug=True)
diff --git a/myproject/template/helloworld.html b/myproject/template/helloworld.html
index 5bf24557ad7e1926e973e26dd20a95220fd5b09d..554d004e1533bd4151dae062e93a18a925390bef 100644
--- a/myproject/template/helloworld.html
+++ b/myproject/template/helloworld.html
@@ -8,17 +8,25 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.7/viewer.css" integrity="sha512-9NawOLzuLE2GD22PJ6IPWXEjPalb/FpdH1qMpgXdaDM+0OfxEV75ZCle6KhZi0vM6ZWvMrNnIZv6YnsL+keVmA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
img {
- width: 200px;
- height: 200px;
+ width: 150px;
+ height: 150px;
}
</style>
</head>
<body>
<div class="container">
+ <div class="alert alert-success" role="alert">
+ Welcome {{ data.username }} , you are in {{ data.env }}
+ </div>
+
<ul id="images">
+
<li><img src="https://th.bing.com/th/id/OIP.d7XoYXNNdLcexb9E1xehCAHaEK?w=278&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="Picture 1"></li> <br>
<li><img src="https://th.bing.com/th/id/OIP.TldVfnF-trAnn4FNSJ42RAHaEK?w=324&h=182&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="Picture 1"></li> <br>
- <li><img src="https://th.bing.com/th/id/OIP.ysjV0sgOseoA-KELS-qr_AHaEK?w=320&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="Picture 1"></li>
+ <li><img src="https://th.bing.com/th/id/OIP.ysjV0sgOseoA-KELS-qr_AHaEK?w=320&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="Picture 1"></li> <br>
+
+ <li><img src="{{ data.avater }}" alt="Picture 1"></li>
+
</ul>
</div>
@@ -27,20 +35,15 @@
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.7/viewer.min.js" integrity="sha512-lZD0JiwhtP4UkFD1mc96NiTZ14L7MjyX5Khk8PMxJszXMLvu7kjq1sp4bb0tcL6MY+/4sIuiUxubOqoueHrW4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.7/viewer.common.js" integrity="sha512-LlQl0sFUcI1vIDM7mJLlc6a8ED/7OodBOExKGh93wuOhftpuR+LqrihUhDERtnX526QoQqqKWxg6BpMjEibyMw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
<script>
// View an image.
const viewer = new Viewer(document.getElementById('images'), {
- inline: true,
viewed() {
- viewer.zoomTo(1);
+ // viewer.hide();
},
});
- // Then, show the image by clicking it, or call `viewer.show()`.
-
- // View a list of images.
- // Note: All images within the container will be found by calling `element.querySelectorAll('img')`.
- const gallery = new Viewer(document.getElementById('images'));
- // Then, show one image by click it, or call `gallery.show()`.
+
</script>
</body>
</html>
\ No newline at end of file