就像可以使用花括号控制文本一样,也可以使用花括号控制元素属性。
我们的图像缺少一个 src
属性,让我们添加一个吧:
看上去不错,但是 Svelte 给出了一条警告信息:
A11y: <img> element should have an alt attribute
在构建 web 应用程序时,确保它们能够为最广泛的用户群 可用(accessible) 很重要,包括视力或行动受限的用户,或者没有强大硬件或良好互联网连接的用户。可访问性(Accessibility,缩写为 a11y)方面的问题并不总是容易纠正的,但是如果编写的标签不具有良好的可访问性,Svelte 会通过警告来帮你改正。
在上面这个例子中,我们缺少 alt
属性,该属性用于描述这个标签的用途,以便让使用屏幕阅读器的用户,或网络连接缓慢、不稳定的用户了解这幅图像的用途。接下来就让我们完善一下吧:
<img src={src} alt="A man dances.">
我们可以在属性 内部 使用花括号*。试着改为 "{name} dances."
— 不要忘了在 <script>
块内声明 name
变量。
速记属性
名称和值相同的属性并不少见,比如 src={src}
。Svelte 为这些情况提供了一个方便的速记法:
<img {src} alt="A man dances.">