tornado操作之顯示圖片及其相關騷操作！

三個基本頁面

發現或最近上傳的圖片頁面 /explore ExploreHandler

所關注的用戶圖片流 / IndexHandler

單個圖片詳情頁面 /post/id PostHandler

1.三個基本頁面中加入圖片

第一部分：初級階段——做到可以顯示圖片！

①static文件夾里創建imgs文件夾，在其中放入所需圖片

②在每個HTML頁面中插入圖片進行顯示

（1）舉例：explore.html

{% extends 'base.html'%} {% block title %}explore page{% end %} {% block content %} I am explore
{% end %}

（2）另外兩個HTML頁面相同地方插入所需顯示圖片：

post.html:

index.html:

第二部分：中級階段——static_url_prefix的使用！

在需要效果靜態文件夾的名稱時使用！

①沒做任何更改時訪問index.html界面：（會發現圖片地址就是指定的http://m.bai1xia.com/news/zb_users/upload/2022/05/20220525182458_26328.jpg，這也就是項目文件夾下對應圖片的真實路徑，如果此時在瀏覽器中訪問127.0.0.1:8080http://m.bai1xia.com/news/zb_users/upload/2022/05/20220525182458_26328.jpg會發現可以訪問到第一張圖片，但是這不就暴露了！）

②在app.py文件中設置static_url_prefix:（默認是static）

③在模板文件中使用static_url_prefix:（index.html）

{% extends 'base.html' %} {% block title %} index page{% end %} {% block content %} I am index
{% end %}

④現在再訪問index.html界面：（會發現圖片地址變成了/tupian/imgs/1.jpg，也就是說如果設置并使用了參數static_url_prefix，那么我們就可以隨心所欲的在前端顯示我們想要顯示的靜態文件夾名！）

第三部分：高級階段——index.html和explore.html頁面顯示所有四張圖片；post.html根據輸入url顯示對應圖片！

①前端中使用for循環輸出圖片：（explore.html）

{% extends 'base.html'%} {% block title %}explore page{% end %} {% block content %} I am explore
{% for i in range(1,5) %}
{% end %} {% end %}

②如果每個前端頁面都需要圖片循環顯示，上面那樣做前端代碼就多了，為了減少前端中的循環，在后端中使用for循環輸出圖片：（index.html）

（1）更改index.html對應的類視圖：

（2）更改index.html:

{% extends 'base.html' %} {% block title %} index page{% end %} {% block content %} I am index
{% for img_url in imgs %}
{% end %}

**百度網盤鏈接：

鏈接：https://pan.baidu.com/s/13sC-f-b4BRaO8HNGxha-xw

提取碼：xycn

**

HTML Tornado

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。