就像你可以使用花括号控制文本一样,你也可以用花括号控制元素的属性(attributes)。
我们的图像缺少了 src
属性,让我们加一个:
App.svelte
<img src={src} />
这样好多了。不过如果你把鼠标放到编辑器的 <img>
标签上,Svelte 会给出这样一个警告:
A11y: <img> 元素应该有 alt 属性
当我们构建网页应用时,我们要确保这个应用能被尽可能多的人群使用,比如有视觉或行动障碍的人群,或者硬件设施不太高的人群,或者网络连接不太好的人群。无障碍(简写作 a11y)有时候并不容易达到,但是 Svelte 会尽可能帮助你,在你编写没达到无障碍要求的代码时提出警告。
在这个例子中,我们没有填写 alt
属性,这样使用屏幕阅读器的人群,或者网络又慢又卡的人群就无法了解到这个是什么图片。让我们把它加上:
App.svelte
<img src={src} alt="A man dances." />
我们也可以在属性 内部 使用花括号。尝试改为 "{name} dances"
,当然要记得先在 script
标签内声明 name
变量。
属性简写
属性名和变量名相同是一件很常见的事情,就比如 src={src}
。Svelte 允许我们在这种情况下使用简写:
App.svelte
<img {src} alt="{name} dances." />