将图片一行三个排列

li {
    list-style: none;
}

.content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.item {
    flex: 1;
    height: 300px;
    background-color: #ededed;

    /* 间隙为5px */
    margin: 0 5px 5px 0;
    /* END */

    /* 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整 */
    width: calc((100% - 10px) / 3);
    /* END */

    /* 加入这两个后每个item的宽度就生效了 */
    min-width: calc((100% - 10px) / 3);
    max-width: calc((100% - 10px) / 3);
    /* END */
}

.item:nth-child(3n) {
    /* 去除第3n个的margin-right */
    margin-right: 0;
}

img {
    height: 100%;
    width: 100%;
}

input {
    height: 30px;
    width: 300px;

<template>
    <div>
        请输入路径：<input type="text" v-model="path" @blur="getupload">
        <ul class="content">
            <li v-for="(v, i) in imgurl" :key="i" class="item">
                <img :src="v" alt="">
            </li>
        </ul>
    </div>
</template>

<script>
import { getupload } from "../api/home"
export default {
    data() {
        return {
            path: "",
            imgurl: null,
            type: null,
        }
    },
    methods: {
        getupload() {
            getupload(this.path).then((res) => {
                console.log(res);
                this.imgurl = res.data
            })
        }

    },
}
</script>

<style scoped>