跳至主要内容

就像你可以使用花括号来控制文本一样,你也可以使用它们来控制元素属性。

我们的图片缺少 src — 让我们添加一个

App
<img src={src} />

这样好多了。但是,如果你将鼠标悬停在编辑器中的 <img> 上,Svelte 会给我们一个警告

`<img>` element should have an alt attribute

在构建 Web 应用时,务必确保它们对尽可能广泛的用户群体(包括例如视力或行动不便的人,或没有强大硬件或良好网络连接的人)都是可访问的。可访问性(缩写为 a11y)并不总是容易做到的,但 Svelte 会通过警告你在编写不可访问的标记时帮助你。

在本例中,我们缺少 alt 属性,该属性描述了使用屏幕阅读器或网络连接缓慢或不稳定且无法下载图像的人员的图像。让我们添加一个

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

我们可以在属性内部使用花括号。尝试将其更改为 "{name} dances." — 请记住在 <script> 块中声明一个 name 变量。

简写属性

属性的名称和值相同的情况并不少见,例如 src={src}。Svelte 为这些情况提供了一种便捷的简写方式

App
<img {src} alt="{name} dances." />

在 GitHub 上编辑此页面

上一个 下一个
1
2
3
4
5
6
<script>
	let src = '/tutorial/image.gif';
</script>
 
<img />