这种方式，是后端先从数据库取出图片数据，将图片的地址，简介，抬头在后端整理成Queryset格式，然后直接发到前段，前段拿到数据直接for循环即可
url文件
from django.contrib import admin from django.urls import path from app01 import views urlpatterns = [ path('admin/', admin.site.urls), path('img.html/', views.img), ]
models文件
class Img(models.Model): src = models.FileField(max_length=32,verbose_name='图片路径',upload_to='static/upload') title = models.CharField(max_length=16,verbose_name='标题') summary = models.CharField(max_length=128,verbose_name='简介') class Meta: verbose_name_plural = '图片表' def __str__(self): return self.title
views文件-----重点
def img(request): img_list = models.Img.objects.all() #获取数据库素有有对象，不过这个好像前段用不到 img_list_src = models.Img.objects.values('src','title') #获取数据库的中数据 num = img_list.count() #数据库中总的数据的条数 d1=img_list_src[0:num:4] #运用字典切片取值，每从[0]位置开始取，每隔4个取一次 d2=img_list_src[1:num:4] d3=img_list_src[2:num:4] d4=img_list_src[3:num:4] return render(request,'img.html',{'img_list':img_list,"d1":d1,"d2":d2,'d3':d3,'d4':d4,"img_list_src": img_list_src})
html文件--前端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .w{ width: 1000px; margin: 0 auto; } .item{ width: 25%; float: left; } .item img{ width: 100%; } </style> </head> <body> <div>风景图片</div> <div class="w"> <div class="item"> {% for item in d1 %} <img src="/{{ item.src }}" alt=""> <div>{{ item.title }}</div> {% endfor %} </div> <div class="item"> {% for item in d2 %} <img src="/{{ item.src }}" alt=""> <div>{{ item.title }}</div> {% endfor %} </div> <div class="item"> {% for item in d3 %} <img src="/{{ item.src }}" alt=""> <div>{{ item.title }}</div> {% endfor %} </div> <div class="item"> {% for item in d4 %} <img src="/{{ item.src }}" alt=""> <div>{{ item.title }}</div> {% endfor %} </div> </div> </body> </html>