diff --git a/change/@fluentui-react-avatar-d8ee1b7d-ba8b-46a7-8aa6-bf5d84ebdbfe.json b/change/@fluentui-react-avatar-d8ee1b7d-ba8b-46a7-8aa6-bf5d84ebdbfe.json
new file mode 100644
index 0000000000000..a146adcf6616f
--- /dev/null
+++ b/change/@fluentui-react-avatar-d8ee1b7d-ba8b-46a7-8aa6-bf5d84ebdbfe.json
@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "fix: Do not render the image when src prop is undefined.",
+ "packageName": "@fluentui/react-avatar",
+ "email": "esteban.230@hotmail.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-avatar/src/components/Avatar/Avatar.test.tsx b/packages/react-components/react-avatar/src/components/Avatar/Avatar.test.tsx
index 0fbbc8340169c..7dd2a1737b0c8 100644
--- a/packages/react-components/react-avatar/src/components/Avatar/Avatar.test.tsx
+++ b/packages/react-components/react-avatar/src/components/Avatar/Avatar.test.tsx
@@ -247,4 +247,10 @@ describe('Avatar', () => {
expect(root.getAttribute('aria-label')).toBe('First Last');
expect(root.getAttribute('aria-labelledby')).toBeFalsy();
});
+
+ it('does not render an image when the src attribute is undefined', () => {
+ render();
+
+ expect(screen.queryByAltText('test-image')).toBeNull();
+ });
});
diff --git a/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx b/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx
index 7a7b69bd1990b..1c39ef99a557c 100644
--- a/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx
+++ b/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx
@@ -45,7 +45,7 @@ export const useAvatar_unstable = (props: AvatarProps, ref: React.Ref(undefined);
- const image: AvatarState['image'] = resolveShorthand(props.image, {
+ let image: AvatarState['image'] = resolveShorthand(props.image, {
defaultProps: {
alt: '',
role: 'presentation',
@@ -54,6 +54,11 @@ export const useAvatar_unstable = (props: AvatarProps, ref: React.Ref setImageHidden(true));