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

imgタグにはsrcが足りないようです。追加してみましょう。

<img src={src}>

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

A11y: <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="A man dances.">


		
loading editor...

Console

loading Svelte compiler...


		
loading editor...

Compiler options

result = svelte.compile(source, {
generate:
});


		
loading editor...