在使用v-for循环生成图片，且图片的路径是相对路径时，直接将其放在数组中会使得图片无法正常显示，相对路径无法正常解析。

解决方案

一、require

给每一个相对路径加上require，使得vue能够正确解析相对路径资源

<template>
    <div>
        <div v-for="item in list">
            <img :src="item" alt="">
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                require('../assets/1.jpg'),
                require('../assets/2.jpg'),
                require('../assets/3.jpg'),
                require('../assets/4.jpg')
            ]
        }
    }
}
</script>

<style lang="less" scoped></style>

二、new URL

使用new URL字段并且带上import.meta.url，使得编译器能够解析相对路径地址

<template>
    <div>
        <div v-for="item in list">
            <img :src="item" alt="">
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                new URL("../assets/1.jpg", import.meta.url),
                new URL("../assets/2.jpg", import.meta.url),
                new URL("../assets/3.jpg", import.meta.url),
                new URL("../assets/4.jpg", import.meta.url),
                new URL("../assets/5.jpg", import.meta.url),
            ]
        }
    }
}
</script>

<style lang="less" scoped></style>

这两种方法在选项式api和组合式api中都能使用。