首页 > 其他分享 >简易图片浏览网站

简易图片浏览网站

时间:2023-05-02 22:00:10浏览次数:33  
标签:浏览 网站 image 简易 Flask path app 图片

BY GPT4

我想创建一个图片浏览网站。我的服务器的公网IP是xxxxxxx,我的图片存储在xxxxxxxxxxx的各个子目录中,这个目录可能是嵌套的。我希望用户可以通过网页,方便地浏览、下载该目录下的图片。并且,服务器上的图片经常增加或者更新,我需要保证该网页的实时性,也就是与服务器上的图片情况同步。我希望你用尽可能简单的方式逐步实现,每给出一部分代码都应该有一个可以验证的结果,而不是一次给出所有代码。

好的,我们将逐步创建一个简单的图片浏览网站。首先,我们将使用Python的Flask框架创建一个基本的Web应用程序。为了使用Flask,你需要确保你的服务器上已经安装了Python和Flask。如果没有,请按照以下命令安装:

sudo apt update
sudo apt install python3 python3-pip
pip3 install Flask

现在,我们可以开始创建一个简单的Flask应用程序。在服务器上创建一个新文件app.py,并添加以下代码:

from flask import Flask, render_template, send_from_directory

app = Flask(__name__)

@app.route('/')
def index():
    return "欢迎来到图片浏览网站!"

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8080)

保存文件后,在命令行中输入以下命令运行Flask应用:

python3 app.py

此时,你可以在浏览器中通过服务器的公网IP和端口访问网站,即 http://xxxxxxxxx:8080/,你将看到“欢迎来到图片浏览网站!”的欢迎信息。 

在验证了基本的Flask应用程序之后,我们将继续添加功能以显示和下载图片。请让我知道你准备好进行下一步时。

PS. 如果租用阿里云或者腾讯云,需要设置安全组,不然无法正常访问。

我已经准备好进行下一步。

很好,接下来我们将在Flask应用程序中添加功能以浏览和下载图片。

首先,在app.py同级目录下创建一个名为templates的文件夹,并在其中创建一个名为index.html的文件。我们将在这个HTML文件中展示图片。将以下代码添加到index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>图片浏览网站</title>
</head>
<body>
  <h1>图片列表</h1>
  <ul>
    {% for image in images %}
      <li>
        <a href="{{ url_for('download_image', path=image.path) }}" target="_blank">
          <img src="{{ url_for('download_image', path=image.path) }}" alt="{{ image.name }}" width="200">
        </a>
        <br>
        {{ image.name }}
      </li>
    {% endfor %}
  </ul>
</body>
</html>

然后,更新app.py文件以包含必要的函数来获取图片列表,以及为模板提供图片数据。我们还将添加一个新的路由来处理图片下载。在app.py文件中添加以下代码:

import os
from collections import namedtuple

Image = namedtuple('Image', ['name', 'path'])

def get_image_list(base_path):
    image_list = []
    for root, dirs, files in os.walk(base_path):
        for file in files:
            if file.lower().endswith(('.png', '.jpg', '.jpeg', '.gif', '.bmp')):
                image_path = os.path.join(root, file)
                rel_path = os.path.relpath(image_path, base_path)
                image_list.append(Image(name=file, path=rel_path))
    return image_list

@app.route('/images')
def images():
    base_path = 'xxxxxxxxxxx/outputs'
    image_list = get_image_list(base_path)
    return render_template('index.html', images=image_list)

@app.route('/download_image/<path:path>')
def download_image(path):
    base_path = 'xxxxxxxxxxx/outputs'
    return send_from_directory(base_path, path)

现在,重新启动Flask应用程序:

python3 app.py

打开浏览器并访问 http://xxxxxxxxx:8080/images,你将看到`xxxxxxxxxx/outputs`目录下的图片列表。 

点击图片,它将在新标签页中打开,用户可以通过右键菜单下载图片。图片列表将根据服务器上的图片实时更新。

这就是一个基本的图片浏览和下载网站。如果你需要添加更多功能或者对页面样式进行调整,请随时告诉我。

标签:浏览,网站,image,简易,Flask,path,app,图片
From: https://www.cnblogs.com/xkxf/p/17368373.html

相关文章

  • 【Web】前端框架对微软老旧浏览器的支持
    零、原因最近要做一个项目,要能在学校机房运行的,也要在手机上运行。电脑和手机,一次性开发,那最好的就是响应式前端框架了。手机和正常的电脑兼容性问题应该都不大,但是学校机房都是Win7的系统,自带的都是IE8的浏览器。虽然有安装谷歌浏览器、360浏览器啥的,但是默认的还是IE浏览器。这......
  • 关于使用Wordpress搭建网站icon图标无法显示的问题
    我也是网上找资料,然后得到的是添加<linkrel="shortcuticon"href="你的图标url地址"type="image/x-icon">这行代码,但是还是没用,阴差阳错反而把wordpress后台那个的图标换成我的图标了,几经周折,我发现只要上传favicon.ico这个图片(最好命名为favicon)到根目录,然后在主题里不要添......
  • 安卓QQ浏览器打开新浪博客
    Update以上问题已经不是问题了,因为况哥不用新浪博客了。况哥登录新浪博客时,提示账户异常,以前的博客无法查看,更别说修改了。为了避免即使可能恢复正常后再次出现这种问题,况哥决定直接弃用。 ......
  • Python自动化办公——Selenium控制浏览器
    Python之selenium创建多个标签页码夫破石2022-11-04原文最近在做一个项目,需要用到cookies登录,想法是,在同一个浏览器下,打开两个标签页进行。让其自动获取cookies,先记录,不行的话,到时候再手动加载cookies。1'''2#selenium加载新标签页3'''4#导入所需库5fromseleniumi......
  • 设置两个Chrome浏览器 一个正常使用 一个无图片版
    添加两个Chrome浏览器双击打开Chrome浏览器,点击右上角头像,点击添加选择“在不登录帐号的情况下继续”,创建一个名字,选个配色,勾选下面的创建桌面快捷方式此时会打开一个新的Chrome浏览器,桌面上也会同步出现一个“web测试-Chrome”图标。按照同样的步骤添加一个平常用的账户......
  • 【数据挖掘&机器学习】招聘网站的职位招聘数据的分位数图、分位数-分位数图以及散点图
    一.本次需求背景本文主题:招聘网站的职位招聘数据的分位数图、分位数-分位数图以及散点图、使用线性回归算法拟合散点图处理详解之前的文章我们已经对爬取的数据做了清洗处理,然后又对其数据做了一个薪资数据的倾斜情况以及盒图离群点的探究。我们这次的需求是:使用散点图、使用......
  • 如何搭建表白墙网站(LoveWall),Linux搭建网站教程
    用宝塔面板和开源表白墙程序LoveWall搭建一个表白墙网站。LoveWall是一个基于Thinkphp开发的表白墙。特色功能点赞发评论发弹幕多校区分享页涉证、涉H、暴力、违禁物等名词进行检测waitUpdate。下面是搭建教程:一、注册域名域名就是你的网站的网址,比如:blog.zeruns.tech就是我......
  • 颁发不受浏览器信任的SSL证书
    颁发不受浏览器信任的SSL证书 颁发不受浏览器信任的SSL证书#生成一个RSA密钥$opensslgenrsa-des3-outcrabdave.key1024#生成一个证书请求$opensslreq-new-keycrabdave.key-outcrabdave.csr#拷贝一个不需要输入密码的密钥文件$opensslrsa-incrabda......
  • 使用localXHR.js让ExtJS docs可以在本地浏览
    使用localXHR.js让ExtJSdocs可以在本地浏览     我们在使用ext/docs目录下的文档时报一些js的错误,导致我们不能正常浏览使用,这时我们使用localXHR.js这样一个文件来支持本地使用ajax,使用方法如下:     下载localXHR.js放在docs目录下,然后在index.html中加入<scriptsrc......
  • ChatGPT免费网站合集
    https://ainav.sciencat.net/chatgpthttps://ai3.chagpt.fun/https://chat.wuguokai.cn/#/chat/1682671904761https://chat.jinshutuan.com/#/chat/1682671909954 下载安装Edgedev版本,直接申请NewBingEdgeDev是Edge浏览器的开发者版本,这个跟你电脑上自带的Edge浏览器不......