Guías Técnicas

Cómo Mostrar Imágenes en Svelte 5

En Svelte, puedes mostrar imágenes de diversas maneras, ya sea cargándolas desde archivos locales, rutas dinámicas o URLs externas. Aquí tienes ejemplos prácticos para entender cómo hacerlo.

Mostrar una imagen local

Si tienes una imagen en tu proyecto, puedes importarla directamente o usar el camino relativo.

js 
<script>
import myImage from './path/to/image.jpg';
</script>

<img src={myImage} alt="Descripción de la imagen" />

Imagen con ruta relativa

Si la imagen está en la carpeta static o public, puedes usar una ruta relativa (sin importar explícitamente la imagen).

html 
<img src="/images/logo.png" alt="Logo de la compañía" />
  Nota:

Las imágenes en la carpeta static o public están disponibles directamente en el navegador.

Imagen con una URL externa

Puedes usar una URL para cargar imágenes desde Internet.

html 
<img src="https://via.placeholder.com/150" alt="Imagen de ejemplo" />

Imagen dinámica (basada en datos)

Si la ruta de la imagen proviene de una variable, puedes usarla dinámicamente.

js 
<script>
let imageUrl = '/images/profile.png';
</script>

<img src={imageUrl} alt="Imagen dinámica" />

Cambiar imágenes dinámicamente

Puedes cambiar la imagen en función de alguna acción o condición.

js 
<script>
let isHappy = true;

const toggleMood = () => {
  isHappy = !isHappy;
};
</script>

<button on:click={toggleMood}>Cambiar estado</button>
<img src={isHappy ? '/images/happy.png' : '/images/sad.png'} alt="Estado emocional" />

Cargar imágenes de una lista

Muestra una galería o lista de imágenes usando un bucle each.

js 
<script>
const images = [
  '/images/pic1.jpg',
  '/images/pic2.jpg',
  '/images/pic3.jpg'
];
</script>

<div>
{#each images as image}
  <img src={image} alt="Imagen de la galería" />
{/each}
</div>

Imagen con estilos inline

Aplica estilos directamente en la imagen.

html 
<img src="/images/logo.png" alt="Logo estilizado" style="width: 100px; border-radius: 50%;" />

Fondo de imagen con estilos CSS

Si necesitas usar la imagen como fondo.

html 
<div style="background-image: url('/images/background.jpg'); width: 100%; height: 200px; background-size: cover;">
</div>