Several ways to use require/import keywords to import local images in v-for loop

<div class="item" v-for="(item, index) in apiArr" :key="index">
    <!-- apiArr is the data returned by the backend, each of which has an imgUrl attribute that stores the URL address of the image -->
    <img :src="item.imgUrl" alt="">
</div>

<template>
  <div class="wrap">
    <div class="item" v-for="(item, index) in apiArr" :key="index">
      <div class="imgWrap">
        <!-- require introduces the image file module -->
        <img :src="require(`@/assets/img/${item.imgTitle}.png`)" alt="" />
        <!-- Finally it will become like this and can be displayed normally <img src="@/assets/img/first.png" alt=""> -->
      </div>
      <div class="infoWrap">
        <div><span class="bloder">Rank:</span> {{ item.title }}</div>
        <div><span class="bloder">Score:</span> {{ item.score }}</div>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      apiArr: [],
    };
  },
  mounted() {
    // Assume that apiArr is the data returned by the backend when we send the request, and the imgTitle property in it stores the name of the image // By introducing it through the require keyword, it will automatically search for the corresponding image file in the file under the specified path and load it out this.apiArr = [
      {
        title: "Champion",
        score: "98.8",
        imgTitle: "first",
      },
      {
        title: "Runner-up",
        score: "97.9",
        imgTitle: "second",
      },
      {
        title: "Third runner-up",
        score: "96.2",
        imgTitle: "third",
      },
    ];
  },
};
</script>

<template>
  <div class="wrap">
    <div class="item" v-for="(item, index) in apiArr" :key="index">
      <div class="imgWrap">
        <img :src="item.imgTitle" alt="" />
      </div>
      <div class="infoWrap">
        <div><span class="bloder">Rank:</span> {{ item.title }}</div>
        <div><span class="bloder">Score:</span> {{ item.score }}</div>
      </div>
    </div>
  </div>
</template>

<script>
// import import first from "@/assets/img/first.png";
import second from "@/assets/img/second.png";
import third from '@/assets/img/third.png'
export default {
  data() {
    return {
      apiArr: [
        {
          title: "Champion",
          score: "98.8",
          imgTitle: first, // Use the imported image},
        {
          title: "Runner-up",
          score: "97.9",
          imgTitle: second, // Use the imported image},
        {
          title: "Third runner-up",
          score: "96.2",
          imgTitle: third, // Use the imported image},
      ],
    };
  },
};
</script>