عکس کاربر

ابجکتی از تمام کاربران بساز و در حلقه v-for قرار بده:

data(){
        return {            
            users: [
                {
                    userId:'1',
                    userName:'Name Family',
                    email:'UserName@gmail.com',
                    avatar:'/img/user-1.png'
                },
                {
                    userId:'2',
                    userName:'AnotherName Family',
                    email:'AnotherName@gmail.com',
                    avatar:'/img/user-2.png'
                },
            ]
        }
    },   

<div v-for="user in users" :key="user.id">
      <img :src="user.avatar" alt="someText">
       <h3>{{user.userName}}</h3>
</div>

امیدوترم اشتباه نکرده باشم چون تست نکردم.

ممنونم از راهنمایی تون، دارم فکر میکنم برا وقتی دیتا میخواد رو سرور قرار بگیره بهتر نیست عکسا همه یه جا باشه (تو فولدر سورس) ؟

خواهش میکنم. دیتایی که از طرف سرور دریافت میکنید تقریبا به صورت همین ابجکت دریافت میشه و شما عکس رو دریافت نمیکنید بلکه url عکس که قبلا روی سرور ذخیره شده رو دریافت میکنید و به شکل بالا نمایش میدید. در حالت توسعه front end چون اتصال به سرور هنوز میسر نیست باید به شکل بالا به صورت یک ابجکت ثابت دیتای دریافتی از سرور رو شبیه سازی کنید. برای نمایش بقیه بخش ها و کمپوننت ها هم باید دقیقا به همین شکل عمل کنید. برنامه نویس back end شما احتمالا تمام عکس های پروفایل رو در یک پوشه واحد به نام مثلا profilesImage ذخیره میکنه.

ممنونم از توضیحات کامل