Vue如何读取图片

1.第一种是使用Require读取图片

<template> 
    <div>
      <div class="contetB">
            <div v-for="person in personList">
              <img :src="person.img">
              <span>{{person.detail}}</span>
            </div>
          </div>
    </div>
</template>
<script>
  
    export default {
      created(){
        this.getData();
       },
      methods:{
        getData(){
          this.personList=[
            {
            'img': require("@/assets/boy.png"),
            'detail':'I am a gentle boy.'
          },
            {
              'img': require("@/assets/gril.png"),
              'detail':'I am a school girl.'
            },
            {
              'img': require("@/assets/nanhai.png"),
              'detail':'I am a super cute boy.'
            },
            {
              'img':  require("@/assets/nvhai.png"),
              'detail':'I am an invincible cute girl.'
            }
          ]

               } ,
        toDetail(){
          this.$router.push({path:'/detail'})
        }
      },

    }
</script>
<style>
  @import "../css/style.css";
  @import "../css/next.css";
</style>

2.第二种通过import导入方法。

<template> 
    <div>
      <div class="contetB">
            <div v-for="person in personList">
              <img :src="person.img">
              <span>{{person.detail}}</span>
            </div>
          </div>
    </div>
</template>
<script>
   import boy from "@/assets/boy.png"
   import gril from "@/assets/gril.png"
   import gen from "@/assets/nanhai.png"
   import lady from "@/assets/nvhai.png"
    export default {
      created(){
        this.getData();
       },
      methods:{
        getData(){
          this.personList=[
            {
            'img': boy,
            'detail':'I am a gentle boy.'
          },
            {
              'img': gril,
              'detail':'I am a school girl.'
            },
            {
              'img': gen,
              'detail':'I am a super cute boy.'
            },
            {
              'img':  lady,
              'detail':'I am an invincible cute girl.'
            }
          ]

               } ,
        toDetail(){
          this.$router.push({path:'/detail'})
        }
      },

    }
</script>
<style>
  @import "../css/style.css";
  @import "../css/next.css";
</style>