React-Bilder: fünf Wege vom statischen Import zum Nutzer-Upload

„Ein Bild importieren“ kann in React bedeuten, eine Quelldatei zu bündeln, auf ein öffentliches Asset zu verweisen, eine externe URL zu rendern, ein Bild über CSS zu laden oder es aus einem Upload-Workflow zu empfangen. Jeder dieser Wege hat einen anderen Lebenszyklus.

Worauf es besonders ankommt

• CSS-Importe eignen sich für dekorative Assets, nicht für Inhalte, die Alternativtext benötigen.
• Nutzer-Uploads benötigen serverseitig autorisierten Speicher und Verarbeitung statt eines Imports zur Build-Zeit.

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" />
}

Wissenswerte technische Details

• Bei einem statischen Import kann ein Bundler ein bekanntes Asset zur Build-Zeit mit einem Fingerprint versehen, optimieren und überprüfen. Eine Zeichenfolge mit einem öffentlichen Pfad wird dagegen erst aufgelöst, wenn der Browser sie anfordert.
• Von Nutzern ausgewählte Dateien sind lokale Blob-Objekte und keine Modulimporte. Für ihre Vorschau ist eine Objekt-URL oder Decode-API erforderlich, für ihren Upload ein expliziter Netzwerk-Workflow.
• Bildkomponenten von Frameworks können Größenangaben, Optimierung und Laderichtlinien ergänzen. Ihr Verhalten und ihre Positivlisten für Remote-Hosts sind jedoch Framework-Vorgaben und keine React-Funktionen.
• Werden viele große Bilder vorab importiert, können sie dem Build-Graphen und dem Pfad des anfänglichen Bundles hinzugefügt werden, selbst wenn Nutzer sie nie ansehen. Daher sind die Erkennung auf Routenebene und verzögertes Laden wichtig.
• Das img-Element benötigt weiterhin intrinsische Abmessungen und ein sinnvolles Alternativtextverhalten, unabhängig davon, ob sein src aus einem Import, einer URL, einem Blob oder einem Framework-Optimierer stammt.
• Nicht vertrauenswürdige SVG-Uploads sollten ohne gezielte Bereinigung und Content-Security-Policy nicht als gewöhnliches Inline-Markup der Anwendung gerendert werden.

Ein praxisnaher Ansatz

Architekturgrenze

React selbst definiert keine Semantik für Bildimporte. Bundler und Frameworks bestimmen das Verhalten statischer Assets, öffentlicher Pfade, externer URLs und optimierter Bildkomponenten, während die Anwendung für die Upload- und Auslieferungsrichtlinien verantwortlich ist.