diff --git a/src/actions/actionNavigate.tsx b/src/actions/actionNavigate.tsx
index 6a13ef3a..bdf6865d 100644
--- a/src/actions/actionNavigate.tsx
+++ b/src/actions/actionNavigate.tsx
@@ -50,7 +50,7 @@ export const actionGoToCollaborator = register({
border={stroke}
onClick={() => updateData(collaborator.pointer)}
name={collaborator.username || ""}
- src={collaborator.src}
+ src={collaborator.avatarUrl}
/>
);
},
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index 9b2c8b71..9af4dab5 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -1,6 +1,6 @@
import "./Avatar.scss";
-import React from "react";
+import React, { useState } from "react";
import { getClientInitials } from "../clients";
type AvatarProps = {
@@ -13,13 +13,21 @@ type AvatarProps = {
export const Avatar = ({ color, border, onClick, name, src }: AvatarProps) => {
const shortName = getClientInitials(name);
- const style = src
+ const [error, setError] = useState(false);
+ const loadImg = !error && src;
+ const style = loadImg
? undefined
: { background: color, border: `1px solid ${border}` };
return (
- {src ? (
-

+ {loadImg ? (
+

setError(true)}
+ />
) : (
shortName
)}
diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md
index fe6ceeab..e3ca421f 100644
--- a/src/packages/excalidraw/CHANGELOG.md
+++ b/src/packages/excalidraw/CHANGELOG.md
@@ -25,7 +25,7 @@ Please add the latest change on the top under the correct section.
- Exported [`loadSceneOrLibraryFromBlob`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#loadSceneOrLibraryFromBlob) function [#5057](https://github.com/excalidraw/excalidraw/pull/5057).
- Export [`MIME_TYPES`](https://github.com/excalidraw/excalidraw/blob/master/src/constants.ts#L92) supported by Excalidraw [#5135](https://github.com/excalidraw/excalidraw/pull/5135).
-- Support [`src`](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L50) for collaborators. Now onwards host can pass `src` to render the customized avatar for collaborators [#5114](https://github.com/excalidraw/excalidraw/pull/5114).
+- Support [`avatarUrl`](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L50) for collaborators. Now onwards host can pass `avatarUrl` to render the customized avatar for collaborators [#5114](https://github.com/excalidraw/excalidraw/pull/5114), renamed in [#5177](https://github.com/excalidraw/excalidraw/pull/5177).
- Support `libraryItems` argument in `initialData.libraryItems` and `updateScene({ libraryItems })` to be a Promise resolving to `LibraryItems`, and support functional update of `libraryItems` in [`updateScene({ libraryItems })`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#updateScene). [#5101](https://github.com/excalidraw/excalidraw/pull/5101).
- Expose util [`mergeLibraryItems`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#mergeLibraryItems) [#5101](https://github.com/excalidraw/excalidraw/pull/5101).
- Expose util [`exportToClipboard`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#exportToClipboard) which allows to copy the scene contents to clipboard as `svg`, `png` or `json` [#5103](https://github.com/excalidraw/excalidraw/pull/5103).
diff --git a/src/packages/excalidraw/example/App.js b/src/packages/excalidraw/example/App.js
index 31272a4c..ed74bff6 100644
--- a/src/packages/excalidraw/example/App.js
+++ b/src/packages/excalidraw/example/App.js
@@ -487,15 +487,19 @@ export default function App() {
const collaborators = new Map();
collaborators.set("id1", {
username: "Doremon",
- src: "doremon.png",
+ avatarUrl: "doremon.png",
});
collaborators.set("id2", {
username: "Excalibot",
- src: "https://avatars.githubusercontent.com/excalibot",
+ avatarUrl: "excalibot.png",
});
collaborators.set("id3", {
username: "Pika",
- src: "pika.jpeg",
+ avatarUrl: "pika.jpeg",
+ });
+ collaborators.set("id4", {
+ username: "fallback",
+ avatarUrl: "https://example.com",
});
excalidrawRef.current.updateScene({ collaborators });
} else {
diff --git a/src/packages/excalidraw/example/public/excalibot.png b/src/packages/excalidraw/example/public/excalibot.png
new file mode 100644
index 00000000..7928ec32
Binary files /dev/null and b/src/packages/excalidraw/example/public/excalibot.png differ
diff --git a/src/types.ts b/src/types.ts
index 663134d5..1ece60e9 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -47,7 +47,7 @@ export type Collaborator = {
};
// The url of the collaborator's avatar, defaults to username intials
// if not present
- src?: string;
+ avatarUrl?: string;
};
export type DataURL = string & { _brand: "DataURL" };