Skip to main content

就像你可以使用花括号控制文本一样,你也可以用花括号控制元素的属性(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." />

Next: 添加样式

1
2
3
4
5
6
<script>
	let src = '/image.gif';
</script>
 
<img />
 
initialising