Updated the position of alt attribute in avatar component from <div> to <img/> element

[namumakwembo]

Problem

when you add the alt="" attribute to the <avatar/> component , the attribute is not rendered into the <img/> element, it is instead rendered to the wrong element which is the parent of the component <div> . This should not be the case

What does this pull request do ?

in the parent element <div> which accepts attributes i added a ->except('alt') to prevent the alt="" from being rendered into that element .

I later added a new line in the <img/> element i.e @if ($attributes->has('alt')) alt="{{$attributes->get('alt')}}" @endif . this is to check if alt attribute is present and get only that attribute and render it into the <img/> element as it should be

Reason

Accessibility: Adding the alt attribute to an image element is important for allowing visually impaired users to understand the content of the image.

SEO purposes, helping search engines interpret and index the image. It enhances user experience by providing fallback text when images fail to load and aligns with web standards and legal requirements for accessibility compliance.

[PH7-Jack]

@namumakwembo It looks good, however, that's not the right way to do it.

Do these steps

1. Add a "alt" property to the avatar class
2. Use this property to add the alt attribute in the img tag

Thanks for contributing

[PH7-Jack]

Closing this PR because it is using the main branch; please don't create PRs using the main branch.