fix image fallback bug

This commit is contained in:
Ren Amamiya
2023-06-22 17:36:12 +07:00
parent a71e2991c2
commit 36888221ff
28 changed files with 151 additions and 52 deletions

View File

@@ -22,7 +22,8 @@ export function User({ pubkey }: { pubkey: string }) {
<div className="flex items-center gap-2">
<div className="relative h-11 w-11 shrink rounded-md">
<Image
src={user.image || DEFAULT_AVATAR}
src={user.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="h-11 w-11 rounded-md object-cover"
decoding="async"

View File

@@ -66,6 +66,7 @@ export function Page() {
<div className="relative inline-flex h-36 w-full items-center justify-center overflow-hidden rounded-lg border border-zinc-900 bg-zinc-950">
<Image
src={image}
fallback={DEFAULT_AVATAR}
alt="avatar"
className="relative z-10 h-11 w-11 rounded-md"
/>

View File

@@ -158,6 +158,7 @@ export function ChannelCreateModal() {
<div className="relative inline-flex h-36 w-full items-center justify-center overflow-hidden rounded-lg border border-zinc-900 bg-zinc-950">
<Image
src={image}
fallback={DEFAULT_AVATAR}
alt="channel picture"
className="relative z-10 h-11 w-11 rounded-md"
/>

View File

@@ -12,7 +12,8 @@ export function Member({ pubkey }: { pubkey: string }) {
) : (
<Image
className="inline-block h-7 w-7 rounded"
src={user?.image || DEFAULT_AVATAR}
src={user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
/>
)}

View File

@@ -24,7 +24,8 @@ export function ChannelMessageUserMute({
<>
<div className="relative h-11 w-11 shrink-0 rounded-md">
<Image
src={user?.image || DEFAULT_AVATAR}
src={user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="h-11 w-11 rounded-md object-cover"
/>

View File

@@ -17,7 +17,8 @@ export function UserReply({ pubkey }: { pubkey: string }) {
<>
<div className="relative h-9 w-9 shrink overflow-hidden rounded">
<Image
src={user?.image || DEFAULT_AVATAR}
src={user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="h-9 w-9 rounded object-cover"
/>

View File

@@ -19,7 +19,8 @@ export function ChannelMetadata({ id }: { id: string }) {
<div className="flex flex-col gap-2">
<div className="relative shrink-0 rounded-md h-11 w-11">
<Image
src={metadata?.picture || DEFAULT_AVATAR}
src={metadata?.picture}
fallback={DEFAULT_AVATAR}
alt={id}
className="h-11 w-11 rounded-md object-contain bg-zinc-900"
/>

View File

@@ -41,7 +41,8 @@ export function MutedItem({ data }: { data: any }) {
<div className="flex items-center gap-1.5">
<div className="relative h-9 w-9 shrink rounded-md">
<Image
src={user?.image || DEFAULT_AVATAR}
src={user?.image}
fallback={DEFAULT_AVATAR}
alt={data.content}
className="h-9 w-9 rounded-md object-cover"
/>

View File

@@ -35,7 +35,8 @@ export function ChatsListItem({ data }: { data: any }) {
>
<div className="inline-flex shrink-0 h-6 w-6 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
<Image
src={user?.image || DEFAULT_AVATAR}
src={user?.image}
fallback={DEFAULT_AVATAR}
alt={data.sender_pubkey}
className="h-6 w-6 rounded object-cover"
/>

View File

@@ -32,7 +32,8 @@ export function ChatsListSelfItem({ data }: { data: any }) {
>
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
<Image
src={user?.image || DEFAULT_AVATAR}
src={user?.image}
fallback={DEFAULT_AVATAR}
alt={data.pubkey}
className="h-6 w-6 rounded bg-white object-cover"
/>

View File

@@ -18,7 +18,8 @@ export function ChatSidebar({ pubkey }: { pubkey: string }) {
<div className="flex flex-col gap-3">
<div className="relative h-11 w-11 shrink rounded-md">
<Image
src={user?.image || DEFAULT_AVATAR}
src={user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="h-11 w-11 rounded-md object-cover"
/>

View File

@@ -4,6 +4,7 @@ import { CancelIcon } from "@shared/icons";
import { Image } from "@shared/image";
import { RelayContext } from "@shared/relayProvider";
import { useActiveAccount } from "@stores/accounts";
import { DEFAULT_AVATAR } from "@stores/constants";
import { open } from "@tauri-apps/api/dialog";
import { Body, fetch } from "@tauri-apps/api/http";
import { createBlobFromFile } from "@utils/createBlobFromFile";
@@ -206,6 +207,7 @@ export function AddImageBlock({ parentState }: { parentState: any }) {
<div className="relative inline-flex h-56 w-full items-center justify-center overflow-hidden rounded-lg border border-zinc-900 bg-zinc-950">
<Image
src={image}
fallback={DEFAULT_AVATAR}
alt="content"
className="relative z-10 max-h-[156px] h-auto w-[150px] object-cover rounded-md"
/>

View File

@@ -1,7 +1,7 @@
import { CancelIcon } from "@shared/icons";
import { Image } from "@shared/image";
import { TitleBar } from "@shared/titleBar";
import { useActiveAccount } from "@stores/accounts";
import { DEFAULT_AVATAR } from "@stores/constants";
export function ImageBlock({ params }: { params: any }) {
const removeBlock = useActiveAccount((state: any) => state.removeBlock);
@@ -16,6 +16,7 @@ export function ImageBlock({ params }: { params: any }) {
<div className="w-full flex-1 p-3">
<Image
src={params.content}
fallback={DEFAULT_AVATAR}
alt={params.title}
className="w-full h-full object-cover rounded-md"
/>

View File

@@ -27,7 +27,8 @@ export function Profile({ data }: { data: any }) {
<div className="flex items-center gap-2">
<div className="w-12 h-12 shrink-0">
<Image
src={profile.picture || DEFAULT_AVATAR}
src={profile.picture}
fallback={DEFAULT_AVATAR}
className="w-12 h-12 object-cover rounded"
/>
</div>

View File

@@ -88,7 +88,8 @@ export function Page() {
/>
<div className="w-full h-56 bg-zinc-100">
<Image
src={user?.banner || "https://void.cat/d/QY1myro5tkHVs2nY7dy74b.jpg"}
src={user?.banner}
fallback="https://void.cat/d/QY1myro5tkHVs2nY7dy74b.jpg"
alt={"banner"}
className="w-full h-full object-cover"
/>
@@ -96,7 +97,8 @@ export function Page() {
<div className="w-full px-5 -mt-7">
<div>
<Image
src={user?.image || DEFAULT_AVATAR}
src={user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="w-14 h-14 rounded-md ring-2 ring-black"
/>