テキストをコントロールするのに中括弧を使ったのと同じように、要素の属性をコントロールするのに中括弧を使うことができます。

画像 (image) に src がありません。これを追加してみましょう。

<img src={src} />

これでよくなりました。しかし、エディタの <img> をホバーすると、警告が表示されているのがわかります。

`<img>` element should have an alt attribute

Webアプリケーションは、例えば視覚や動作に障害のある方や、高スペックな端末や高速なインターネット回線を持っていない方など、可能な限り幅広いユーザーにとって使いやすいものであることが重要です。アクセシビリティ(Accessibility、略:a11y)を正しく行うことは簡単ではありませんが、もしあなたがアクセシブルでないマークアップを書いてもSvelteが警告を表示してa11yを正しく行う手助けをしてくれます。

この場合、スクリーンリーダー(画面読み上げソフト)を使用するユーザーやインターネット回線が低速・不安定で画像をダウンロードできないユーザーに必要な alt という画像を説明する属性が足りていません。追加しましょう。

<img src={src} alt="A man dances." />

要素の中でも中括弧を使用することができます。<script>ブロックの中にname変数を宣言し、A man dances.を"{name} dances."に変更してみましょう。

Shorthand attributes

src={src} のように、属性の名前と値の変数が一致することは珍しくありません。このような場合、Svelteでは省略して書くことができます。

<img {src} alt="{name} dances." />