![Hướng dẫn Avatar mặc định của User là tên Viết tắt trên dự án Laravel Hướng dẫn Avatar mặc định của User là tên Viết tắt trên dự án Laravel](/storage/media/41/conversions/huong-dan-avatar-mac-dinh-cua-user-la-ten-viet-tat-tren-du-an-laravel-medium.jpg)
Hướng dẫn Avatar mặc định của User là tên Viết tắt trên dự án Laravel
Các các bạn khi sử dụng Android hoặc các ứng dụng danh bạ trên điện thoại đều thấy tên của người khác được viết tắt thành avatar của họ. Trông khá chuyên nghiệp và nhìn cũng hay hay.
Hôm nay mình sẽ hướng dẫn các bạn làm như vậy với dự án trên Laravel của mình. Bạn có thể xem thành quả mà mình đã làm trên dự án của mình
Ok, bây giờ bắt tay làm nhé. Ở đây mình sẽ sử dụng package laravolt/avatar
. Link của package ở đây : https://github.com/laravolt/avatar
Để cài gói này vào dự án của bạn, chạy lện sau:
composer require laravolt/avatar
Để xem rõ cách cài đặt bạn có thể lên GitHub mà mình vừa đưa ở trên để xem, ở đây mình làm trên Laravel 5.6 nên các bạn xài bản laravel cũ hơn thì xem lại Doc nha.
Tiếp theo chạy lệnh sau:
php artisan vendor:publish --provider="Laravolt\Avatar\ServiceProvider"
Một file config sẽ được tạo tại: config/laravolt/avatar.php
OK, bạn đã cài đặt thành công, bây giờ điều quan trọng là bạn phải tạo thêm 1 cột avatar
trong bảng user của bạn đã. Cái này tự xử khỏi hướng dẫn. Bạn có thể để giá trị là null, mình vì dự án lúc trước không có dùng gói này nên để giá trị là avatar.png
để lấy avatar mặc định.
Bây giờ bạn vào Model User để append một thuộc tính là avatar_link
protected $appends = [
'avatar_path'
];
Tiếp theo mình dụng Accessors để kiểm tra giá trị của avatar có rỗng hoặc là giá trị mặc định hay không ( ví dụ giá trị của mình là avatar.png). Code như sau. Nhớ là viết ở trong model User luôn nhé. Bạn để ý tên của function mình viết nhé, đừng sửa tên, nếu sửa thì sửa luôn cái append nhé.
public function getAvatarLinkAttribute()
{
if ($this->attributes['avatar'] == 'avatar.png') {
return Avatar::create($this->attributes['name'])->toBase64();
} else {
return 'upload/user/' . $this->attributes['user'] . '/avatar/' . $this->attributes['avatar'];
}
return $this->attributes['avatar'];
}
Đoạn có ở trên mình viết nếu giá trị mặc định của của cột avatar là avatar.png còn nếu giá trị của bạn là rổng thì nhớ ghi là null hoặc giá trị mặc định của bạn. Đoạn $link là để gán link avatar của user khi họ đổi avatar của họ.
Ok vậy là xong rồi, bây gán vào View thôi
Bạn sẽ gán như lày, giá trị sẽ nằm trong src
<img src="{{ Auth::user()->avatar_link }}" class="user-image" alt="User Image">
Ở gói này vào file config bạn có các tùy chỉnh ở trong đó, bạn có thể vọc chỉnh sửa thử ra sao. Và có thêm một số phương thức ở trong Doc bạn có thể đọc thêm.
Ủng hộ Chung Nguyễn Blog
Chung Nguyễn Blog sử dụng FlashVPS - Dịch vụ quản trị máy chủ chuyên nghiệp để quản lý VPS
#FlashVPS là dịch vụ cloud panel trên nền tảng web hỗ trợ khách hàng:
- * Quản lý máy chủ số lượng nhiều
- * Không có kinh nghiệm quản lý máy chủ
- * Thích sử dụng giao diện web đơn giản, trực quan hơn terminal
- * Quá nhàm chán với việc ghi nhớ và lặp lại việc gõ các câu lệnh
- * Muốn tự động hóa mọi thao tác
- * Muốn tiết kiệm thời gian quản trị máy chủ
- * Muốn tiết kiệm tiền bạc, nhân lực quản trị máy chủ 👉 https://flashvps.dev
Các bài viết trên website thường xuyên được đăng tải và cập nhật trên trang Facebook Chung Nguyễn Blog hãy tặng cho Chung một LIKE nhé! Mãi yêu các bạn!
813 👍Đánh giá bài viết
![like blog call action Thích thì like](https://chungnguyen.xyz/image/web/thichthilike1.png)
Bình luận