VUE使用v-for遍历本地图片时，img无法显示

存在问题的代码：

const imgs = ["@/assets/login/Layout/1.png", "@/assets/login/Layout/2.png",
    "@/assets/login/Layout/3.png", "@/assets/login/Layout/4.png",
    "@/assets/login/Layout/5.png"]
</script>
<template>
    <div class="shell">
        <div class="box" v-for="item in imgs" :index="item">
            <div class="images">
                <img :src="item" alt="" />
            </div>
        </div>
    </div>
</template>

方法一：使用require引入

const imgs = [1,2,3,4,5]
<img :src="require(`@/assets/Layout/${item}.png`)" alt="" />

方法二：使用import引入图片

<div class="item" v-for="(item, index) in apiArr" :key="index">
      <div class="imgWrap">
        <img :src="item.imgTitle" alt="" />
      </div>
</div>

<script>
// import 引入图片
import first from "@/assets/img/first.png";
import second from "@/assets/img/second.png";
import third from '@/assets/img/third.png'

apiArr: [
        {
          title: "冠军",
          score: "98.8",
          imgTitle: first, // 使用引入的图片
        },
        {
          title: "亚军",
          score: "97.9",
          imgTitle: second, // 使用引入的图片
        },
]
</script>

方法三：后端返回图片url

<div class="item" v-for="(item, index) in apiArr" :key="index">
    <!-- apiArr是后端返回的数据，其中的每一项中都有一个imgUrl属性，存储的是图片的url地址 -->
    <img :src="item.imgUrl" alt="">
</div>