vue从后台拿图片并分页

要实现从后台拿图片并分页，可以采用以下步骤：

1. 在后台实现图片上传功能，并将图片信息存储到数据库中；
2. 定义前端页面，使用Vue框架进行开发；
3. 在Vue组件中，使用axios库发起请求，获取后台图片数据；
4. 在Vue组件中，使用分页插件（如vue-pagination）进行分页；
5. 在Vue组件中，通过v-for指令渲染图片列表。

下面是一个简单的代码示例：

<template>
  <div>
    <div v-for="image in images" :key="image.id">
      <img :src="image.url" alt="image">
    </div>
    <vue-pagination :pagination="pagination" @paginate="getImages" />
  </div>
</template>

<script>
import axios from 'axios';
import VuePagination from 'vue-pagination';

export default {
  name: 'ImageList',
  components: {
    VuePagination,
  },
  data() {
    return {
      images: [],
      pagination: {
        current_page: 1,
        last_page: 1,
        per_page: 10,
        total: 0,
      },
    };
  },
  mounted() {
    this.getImages();
  },
  methods: {
    getImages(page = 1) {
      axios.get(`/api/images?page=${page}&per_page=${this.pagination.per_page}`)
        .then(response => {
          this.images = response.data.data;
          this.pagination.current_page = response.data.current_page;
          this.pagination.last_page = response.data.last_page;
          this.pagination.total = response.data.total;
        })
        .catch(error => console.log(error));
    },
  },
};
</script>

在上面的代码中，我们定义了一个ImageList组件，通过axios库发起请求，获取后台图片数据，并使用vue-pagination插件进行分页。通过v-for指令渲染图片列表，实现了从后台拿图片并分页的功能。