UserIconにalt, width, heightをつけた

[ogu-kazemiya]

User description

close #292
CLSを防ぐ、改善する原理がわからなかったので、ひとまずUIの方と同じようにしました

---

PR Type

Enhancement

---

Description

• UserIconコンポーネントのimgタグにalt、width、height属性を追加しました。
• widthとheight属性はsizeプロパティを使用し、画像のサイズを指定します。
• alt属性はuserNameプロパティを使用し、画像の代替テキストを指定します。

---

Changes walkthrough 📝

	Relevant files
Enhancement	UserIcon.vue `UserIcon`コンポーネントに画像属性を追加                                                                src/components/UI/UserIcon.vue imgタグにwidth、height、alt属性を追加 widthとheightはsizeプロパティを使用 altはuserNameプロパティを使用 +8/-1

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[github-actions]

PR Reviewer Guide 🔍

⏱️ Estimated effort to review: 1 🔵⚪⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ No key issues to review

[github-actions]

PR Code Suggestions ✨

Category	Suggestion	Score
Accessibility	<img> タグの :alt 属性にデフォルトの代替テキストを追加します。 タグの :alt 属性には、ユーザー名が空の場合に備えてデフォルトの代替テキストを設定することをお勧めします。これにより、画像が読み込まれない場合やテキストが空の場合に、ユーザーにとってよりアクセシビリティが向上します。 src/components/UI/UserIcon.vue [25] <img :class="$style.icon" :src="src" :style="styles" :width="size" :height="size" - :alt="userName" + :alt="userName || 'ユーザー画像'" /> Suggestion importance[1-10]: 9 Why: Adding a default alt text improves accessibility by providing a fallback description if the userName is empty, which is a significant enhancement for users relying on screen readers.	9

[Pugma]

今回の改善は、ページを読み込む際のユーザー体験の向上を目指して行われたものです

CLS については、以下のサイトを見てもらえればと思います
https://kinsta.com/jp/blog/cumulative-layout-shift/

一言でいうと、ページの読み込み中にページ内要素の位置がずれてしまうことを指します
例えば今回扱った画像においても、変更前の状態であれば以下のようなことが起きます

1. 画像が読み込まれるまでは表示がされず、またその部分を詰めるようにして他の要素が表示される
2. 画像の読み込みが完了したタイミングで、他の要素を下に押し出しながら描画が行われる

ただ、height width の指定によって、画像の読み込み前から予め画像の表示領域を確保した状態で描画させることができるようになります
詳細は以下のサイトを見てもらえれば分かりやすいと思います
https://developer.mozilla.org/ja/docs/Web/HTML/Element/img#height

[Pugma]

やってくれてありがとうございました
okです！