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

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

<img src={src} />

これでよくなりました。ただし、まだ警告が表示され続けています。

A11y: <img> element should have an alt attribute

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

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

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

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

Shorthand attributespermalink

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

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