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界面：（会发现图片地址就是指定的https://www.huoban.com/news/zb_users/upload/2022/05/20220525182458_26328.jpg，这也就是项目文件夹下对应图片的真实路径，如果此时在浏览器中访问127.0.0.1:8080https://www.huoban.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小时内删除侵权内容。