Avatar: Wrong className is getting used when image is undefined

[KOliver94]

Describe the bug

Due to the changes in version 9.0.0 Avatar fallback is not working as intended because the wrong className is getting used.

I'm not sure what acutally changed between 8.7.3 and 9.0.0 but right now

primereact/components/lib/avatar/Avatar.js

Lines 12 to 13 in 595bcf3

	if (props.image && !imageFailed) {
	return <img src={props.image} alt={props.imageAlt} onError={onImageError}></img>;

props.image && !imageFailed will be false as undefined is a falsy value. This way the onImageError function will never be called and it will never set imageFailed to true. However

primereact/components/lib/avatar/Avatar.js

Line 47 in 595bcf3

'p-avatar-image': props.image !== null && !imageFailed,

this line explicitly checks for null which will not catch undefined and as I said earlier imageFailed will never be set to true. So at the end we will use p-avatar-image which will create a transparent background.

Reproducer

CodeSandbox

PrimeReact version

9.0.0

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

1. Open attached CodeSandbox
2. Switch primereact version from 9.0.0 to 8.7.3 to see the difference.

Expected behavior

Fallback icon Avatar should not have p-avatar-image in className and should not have transparent background.

[melloware]

Can you review my PR? Is there anything else that needs to be done?