Vue 绑定的图片不显示

需要通过 require包裹

<template>
      <div>
         {{user.username}}: <img :src="user.avatar" class="avatar">
      </div>
</template>

<script>
export default {
     name: 'PersonalDynamic',
     data() {
          return{
               user:{
                    username:"张三",
                    avatar:require("../../public/images/user1.jpeg")
               }
          }
     }
}
</script>

<style>
img.avatar{
     width: 100px;
     height: 100px;
}
</style>