Cómo usar los atributos dinámicos en Svelte

Las llaves y su magia { }

Las llaves son pura magia. Como en otros frameworks javascript. No podríamos vivir sin ellas, literal.

Magic

Al igual que puede usar llaves para controlar el texto, puede usarlas para controlar los atributos de los elementos.

<img src="{src}" />

Eso esta bien, pero en este caso Svelte nos está dando una advertencia:

A11y: <img> element should have an alt attribute

En este caso, nos falta el atributo alt que describe la imagen para las personas que usan lectores de pantalla o las personas con conexiones a Internet lentas o inestables que no pueden descargar la imagen. Entonces vamos a solucionar ese problema:

<img src="{src}" alt="Magic gif" />

Shorthand attributes

Cuando tenemos el nombre de un atributo y una variable iguales podemos ahorrarnos código, quedando src={src} en tan sólo {src}. Además, en atributos como el alt podemos insertar el valor de una variable, {entre llaves}. Quedando así:

<script>
    let src = '/gifs/magic.gif';
    let name = 'Shia Labeouf';
</script>

<img {src} alt="{name} y su gif magic." />

Magic

Tienes más artículos del curso de Svelte 👉🏻 aquí 👈🏻.

Y esto es todo. Espero que te pueda servir.

Si te gusta mi contenido, puedes "invitarme" a un café ☕️ para apoyarme. 👇🏻

¿Me invitas a un café?