Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-07-16 17:00:02 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Don't show broken image placeholder when ava 404's

Browse Source
This commit is contained in:
Kalle 2022-06-18 17:42:55 +03:00
parent a2f2b2b299
commit f9d3265e88
1 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/components/Avatar.tsx
View File

@ -1,5 +1,6 @@
import clsx from "clsx";
import type { User } from "~/db/types";
import * as React from "react";
const dimensions = {
sm: 44,
@ -17,6 +18,7 @@ export function Avatar({
className?: string;
size: "sm" | "md" | "lg";
} & React.ButtonHTMLAttributes<HTMLImageElement>) {
const [isErrored, setIsErrored] = React.useState(false);
// TODO: just show text... my profile?
// TODO: also show this if discordAvatar is stale and 404's
@ -24,8 +26,8 @@ export function Avatar({
<img
className={clsx("avatar", className)}
src={
discordAvatar
? `https://cdn.discordapp.com/avatars/${discordId}/${discordAvatar}.webp${
discordAvatar && !isErrored
? `https://cdn.discordapp.com/avatas/${discordId}/${discordAvatar}.webp${
size === "lg" ? "" : "?size=80"
}`
: "/img/blank.gif" // avoid broken image placeholder
@ -33,6 +35,7 @@ export function Avatar({
alt=""
width={dimensions[size]}
height={dimensions[size]}
onError={() => setIsErrored(true)}
{...rest}
/>
);