Vuetify Tutorial #20 - Avatars

Hey all, in this Vuetify tutorial we'll take a look at avatars to display images of our team members.

----------------------------------------

🐱‍💻 🐱‍💻 Course Links:

🤑🤑 Donate


🎓🎓 Find me on Udemy

[KejGiunit]

For any one who puts avatar images in assets folder and have problem with dipslaying them this quick solution (found on stackoverflow):
in Team.vue file create method ->
methods: {
getImgUrl(pic){
return require('../assets/' + pic)
}
}

and in image tag ->
<img :alt="person.name">

Hope it helps if anyone go stuck on this like I did.

Great tutorial btw Shaun. Took vuejs now doing this one, and Im starting to love vue :)

[octaviusbytes]

UPDATE:
<v-container>

    <v-avatar size="100">
       <img src="/avatar-1.png" />
      </v-avatar>
    
</v-col>
</v-container>
1) "v-container" is now used instead of "v-layout" as the parent container
2) "v-col" and "v-row" now control the direction of "v-container" and replaces "v-layout"
3) Although subheading can still be use in a class, it now has it's own element "v-subheader"
4) "v-subheader" direction is controlled by adding "justify-center" to the class prop

[davidcousin]

I'm going through the complete series, and this is great work! Thanks Ninja!

[martink]

Do you need v-responsive around avatars on the main grid? I believe you mentioned before that v-responsive is used for pictures in vuetify, but you are not using it consistently with avatar components. Can you clarify?

[MrSobotqa]

For everyone having the same problem centering avatar in navigation drawer:
<v-row class="mt-5" justify="center">
<v-avatar size="100">
<img src="/avatar-1.png" >
</v-avatar>
</v-row>
<v-row justify="center">
<p class="white--text subheading mt-1">The Net Ninja</p>
</v-row>
Works for me, but im not sure if this is the optimal solution :)

[awokawok]

update from vuetify 2.3.0
< *v-row* >
< *v-col class="mt-5 text-center"* >
<v-avatar size="100">
<img src="/avatar-1.png" alt="" />
</v-avatar>
<p class="white--text *text-subtitle-1* mt-1">
The Net Ninja
</p>
</ *v-col* >
</ *v-row* >

[anygames]

Thank you . I need help on customizing the size of <v-text-field>

[shnam]

Thanks a lot. Could u please build a blog using Vuepress (&vuetify)?

[TasosSelalmazidis]

I can't get the grey border in my image. It paints a weird shape around it. Is there a workaround ????

[overnightmares]

why did you put the png files in the public folder? src/assets/ sounds like a more logical place but is it because we're in production?

[sharon]

Thank you this is the exact thing I'm searching for😘😍

[mike-the]

Didn't get it... why can't I use images from ./assets/ for avatars? Why it has to be in public?

[thankikaushik]

Hey the net Ninja, can u make this for version 2, because most are outdated components

[boysbeend]

Thk you from thailand for all of vue vid.

[viktorabrahamsson]

When you type your name "The Net Ninja" it is nice and in the center but if you would change the name to something either shorter or longer the layout breaks. The image will not be in the center if I put my whole name in for example.
I for some reason can't find the solution. Thanks for the vidoes!

[apalancatusueno]

Hi Shaun, I want to thank you and congratulate you because your content is amazing, I look your videos for anything new I want to learn, and I purchased your course on Udemy about Vue and Firestore. I followed all the steps in this video but the images located in public folder don't get loaded, they can't even be access through localhos:8080 + path. Could you please clarify if there are other configs needed in router, or what could be wrong?

[faresgeek-dz]

Could you please make a project with Django and vuetify