Cinco formas de usar imágenes en React, desde la importación estática hasta las subidas del usuario

«Importar una imagen» en React puede significar empaquetar un archivo fuente, hacer referencia a un recurso público, renderizar una URL remota, cargarla mediante CSS o recibirla desde un flujo de trabajo de subida. Cada vía tiene un ciclo de vida diferente.

Lo más importante

• Las importaciones mediante CSS son adecuadas para recursos decorativos, no para contenido que necesita texto alternativo.
• Las subidas de usuarios necesitan almacenamiento y procesamiento autorizados por el servidor, no una importación durante la compilación.

import type { ReactNode } from 'react'

import diagramUrl from './request-flow.png'

export function RequestFlow(): ReactNode {
  return (
    <img
      src={diagramUrl}
      alt="Request flow from the browser to object storage"
      width={960}
      height={540}
    />
  )
}

import type { ReactNode } from 'react'

const allowedImageHosts = new Set(['media.example.com'])

interface ProductImageProps {
  alt: string
  height: number
  src: string
  width: number
}

export function ProductImage({ alt, height, src, width }: ProductImageProps): ReactNode {
  if (!URL.canParse(src)) {
    return null
  }

  const url = new URL(src)
  if (url.protocol !== 'https:' || !allowedImageHosts.has(url.hostname)) {
    return null
  }

  return <img src={url.href} alt={alt} width={width} height={height} loading="lazy" />
}

Detalles técnicos que conviene conocer

• Una importación estática permite que un empaquetador genere la huella digital de un recurso conocido, lo optimice y lo verifique durante la compilación, mientras que una cadena de ruta pública solo se resuelve cuando el navegador la solicita.
• Los archivos seleccionados por el usuario son objetos Blob locales, no importaciones de módulos. Para previsualizarlos se necesita una URL de objeto o una API de decodificación, y para subirlos se necesita un flujo de trabajo de red explícito.
• Los componentes de imagen del framework pueden añadir políticas de dimensionamiento, optimización y carga, pero su comportamiento y sus listas de hosts remotos permitidos son contratos del framework, no características de React.
• Importar de inmediato muchas imágenes grandes puede agregarlas al grafo de compilación y a la ruta del paquete inicial, aunque los usuarios nunca las vean; la detección por ruta y la carga diferida son importantes.
• El elemento img sigue necesitando dimensiones intrínsecas y un comportamiento significativo del texto alternativo, sin importar si su src proviene de una importación, una URL, un Blob o un optimizador del framework.
• Las subidas de SVG no confiables no deben renderizarse como marcado común integrado en la aplicación sin un saneamiento deliberado y una política de seguridad de contenido.

Un enfoque práctico

Límite de la arquitectura

React por sí mismo no define la semántica de importación de imágenes. Los empaquetadores y frameworks determinan cómo se comportan los recursos estáticos, las rutas públicas, las URL remotas y los componentes de imagen optimizados, mientras que la aplicación controla las políticas de subida y entrega.