テキストをコントロールするのに中括弧を使えるのと同じように、要素の属性をコントロールするのに中括弧を使うことができます。
画像 (image) に src がありません。これを追加してみましょう。
App.svelte
<img src={src} />これでよくなりました。しかし、エディタの <img> をホバーすると、警告が表示されているのがわかります。
A11y: <img> element should have an alt attribute
Webアプリケーションは、例えば視覚や動作に障害のある方や、高スペックな端末や高速なインターネット回線を持っていない方など、可能な限り幅広いユーザーにとって使いやすいものであることが重要です。アクセシビリティ(Accessibility、略:a11y)を正しく行うことは簡単ではありませんが、Svelteは警告を表示してa11yを正しく行う手助けをしてくれます。
この場合、スクリーンリーダー(画面読み上げソフト)を使用するユーザーやインターネット回線が低速・不安定で画像をダウンロードできないユーザーに必要なaltという画像を説明する属性が足りていません。追加しましょう。
App.svelte
<img src={src} alt="A man dances." />要素の中でも中括弧を使用することができます。<script>ブロックの中にname変数を宣言し、A man dances.を"{name} dances."に変更してみましょう。
Shorthand attributes
src={src}のように、属性の名前と値の変数が一致することは珍しくありません。このような場合、Svelteでは省略して書くことができます。
App.svelte
<img {src} alt="{name} dances." />