chore(client): 絵文字の画像読み込みに失敗した際はテキストではなくダミー画像を表示

This commit is contained in:
tamaina 2024-03-01 14:09:51 +00:00
parent fe5efd926e
commit 1488eb673d
2 changed files with 13 additions and 1 deletions
packages/frontend/src/components/global

View File

@ -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>;

View File

@ -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 }]"