diff --git a/packages/frontend/src/components/global/MkCustomEmoji.stories.impl.ts b/packages/frontend/src/components/global/MkCustomEmoji.stories.impl.ts index e0da6a4a13..2e791e991e 100644 --- a/packages/frontend/src/components/global/MkCustomEmoji.stories.impl.ts +++ b/packages/frontend/src/components/global/MkCustomEmoji.stories.impl.ts @@ -48,3 +48,10 @@ export const Missing = { name: Default.args.name, }, } satisfies StoryObj<typeof MkCustomEmoji>; +export const Error = { + ...Default, + args: { + url: 'https://example.com/404', + name: Default.args.name, + }, +} satisfies StoryObj<typeof MkCustomEmoji>; diff --git a/packages/frontend/src/components/global/MkCustomEmoji.vue b/packages/frontend/src/components/global/MkCustomEmoji.vue index dbcb00460c..67927ddd22 100644 --- a/packages/frontend/src/components/global/MkCustomEmoji.vue +++ b/packages/frontend/src/components/global/MkCustomEmoji.vue @@ -4,7 +4,12 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<span v-if="errored">:{{ customEmojiName }}:</span> +<img + v-if="errored" + :class="[$style.root, { [$style.normal]: normal, [$style.noStyle]: noStyle }]" + src="/client-assets/dummy.png" + :title="alt" +/> <img v-else :class="[$style.root, { [$style.normal]: normal, [$style.noStyle]: noStyle }]"