Python 生成图片网页列表显示路径和建立时间笔记

news2024/11/15 17:49:16

Python 一键生成图片网页列表显示路径和建立时间（方便查看复制路径、重复一键生成）

支持格式：jpg \png\ svg\ webp

图片网页列表图示：

参考代码：


# -*- coding: utf-8 -*-
import os
import datetime

# 指定图片所在的目录
image_dir = './'
soft_dir = './soft/'
goods_dir = './goods/'

# 获取目录下的所有图片文件
image_files = [f for f in os.listdir(image_dir) if f.endswith('.jpg') or f.endswith('.png') or f.endswith('.svg') or f.endswith('.webp')]
image_softs = [f for f in os.listdir(soft_dir) if f.endswith('.jpg') or f.endswith('.png') or f.endswith('.svg') or f.endswith('.webp')]
image_goods= [f for f in os.listdir(goods_dir) if f.endswith('.jpg') or f.endswith('.png') or f.endswith('.svg') or f.endswith('.webp')]

# 根据建立时间对图片文件进行排序
image_files.sort(key=lambda x: os.path.getctime(os.path.join(image_dir, x)))
image_softs.sort(key=lambda y: os.path.getctime(os.path.join(soft_dir, y)))
image_goods.sort(key=lambda z: os.path.getctime(os.path.join(goods_dir, z)))

# 生成html页面
html = '<html>\n<head>\n<meta charset="utf-8"> \n<title>图片列表</title>\n'
html += f'<link rel="stylesheet" href="img/pic.css">\n'
html += f'</head><body>\n'
for image_file in image_files:
    # 获取图片的建立时间
    create_time = datetime.datetime.fromtimestamp(os.path.getctime(os.path.join(image_dir, image_file)))
    # 将图片路径和建立时间插入到html页面中
    html += f'<div class="responsive"><div class="img">\n'
    html += f'<img src="img/{image_file}" alt="{image_file}" width="200px" height="300px"/>\n'
    html += f'<div class="desc">路径名称：img/{image_file}</div>\n'
    html += f'<div class="desc limit-text">建立时间：{create_time}</div>\n'
    html += f'</div></div>'
for image_soft in image_softs:
    # 获取图片的建立时间
    create_time_soft = datetime.datetime.fromtimestamp(os.path.getctime(os.path.join(soft_dir, image_soft)))
    # 将图片路径和建立时间插入到html页面中
    html += f'<div class="responsive"><div class="img">\n'
    html += f'<img src="img/soft/{image_soft}" alt="{image_soft}" width="200px" height="300px"/>\n'
    html += f'<div class="soft">路径名称：img/soft/{image_soft}</div>\n'
    html += f'<div class="soft limit-text">建立时间：{create_time_soft}</div>\n'
    html += f'</div></div>'
for image_good in image_goods:
    # 获取图片的建立时间
    create_time_good = datetime.datetime.fromtimestamp(os.path.getctime(os.path.join(goods_dir, image_good)))
    # 将图片路径和建立时间插入到html页面中
    html += f'<div class="responsive"><div class="img">\n'
    html += f'<img src="img/goods/{image_good}" alt="{image_good}" width="200px" height="300px"/>\n'
    html += f'<div class="goods">路径名称：img/goods/{image_good}</div>\n'
    html += f'<div class="goods limit-text">建立时间：{create_time_good}</div>\n'
    html += f'</div></div>'


html += '</body>\n</html>'

# 将html页面保存到文件
with open('index.html', 'w',encoding="utf-8") as f:
    f.write(html)

注（支持中文）：

其中 with open('index.html', 'w',encoding="utf-8")

encoding="utf-8" 这个是支持中文写法，要不然乱码

生成网页 index.html

网页样式：pic.css

div.img {margin: 5px;border: 1px solid #ccc;float: left;width: 300px;}
div.img:hover {border: 1px solid #777;}
div.img img {width: 100%;height: auto;}
div.desc {padding: 15px;text-align: center;}
div.soft {padding: 15px;text-align: center; color: #1e9fff;}
div.goods {padding: 15px;text-align: center;color: #ffb800;}
.limit-text {  /* 限制文件显示长度 */
    width: 190px; /* 显示190px文本其余用... */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}