vue3+django，将文件夹中的图片集在前端显示

首先，你需要在 Django 中创建一个视图函数，该函数将返回一个包含所有图片信息的 JSON 数据。你可以使用 Django 的文件系统模块来获取文件夹中所有图片的信息，例如文件名、路径、大小等等。

接下来，在 Vue3 中，你可以使用 Axios 或者 Fetch API 来调用该视图函数，并将返回的 JSON 数据存储在 Vue3 的 data 中。然后，你可以使用 v-for 指令循环遍历该数据，将每个图片的路径传递给 img 标签的 src 属性，以此来展示所有的图片。

以下是示例代码：

Django 视图函数：

import os
import json
from django.http import JsonResponse

def get_images(request):
    images_dir = '/path/to/images/folder/'
    images = []
    for filename in os.listdir(images_dir):
        if filename.endswith('.jpg'):
            path = os.path.join(images_dir, filename)
            size = os.path.getsize(path)
            images.append({'filename': filename, 'path': path, 'size': size})
    return JsonResponse({'images': images})

Vue3 组件：

<template>
  <div>
    <div v-for="image in images" :key="image.path">
      <img :src="image.path" :alt="image.filename">
      <p>Filename: {{ image.filename }}</p>
      <p>Size: {{ image.size }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      images: []
    };
  },
  mounted() {
    axios.get('/get-images/')
      .then(response => {
        this.images = response.data.images;
      })
      .catch(error => {
        console.log(error);
      });
  }
}
</script>