Nodes

Image

Ein Bild, auf das Ihre Daten zeigen, oder eines, das ein Generierungs-Endpoint erzeugt.

Jedes Feld ist ein Prop

src, alt, width und height sind einfache Props, aus dem State berechnet, bevor das Element zurückgegeben wird. Eine Unterschrift, die je Standort abweicht, ein Logo je Marke, ein Foto nach Aktenzeichen — all das bleibt in der Komponente, statt zu einer Verzweigung im Template zu werden:

export const Signature: Image = () => {
  const [state] = useState((data: MemberData) => ({
    src: data.signatureUrl,
    manager: data.managerName,
  }));

  return (
    <Image id="signature" src={state.src} alt={`Signed by ${state.manager}`} width={180} />
  );
};

Aus src wird path

Das Prop heißt src; der aufgelöste Node nennt sie path. Klappen Sie Wozu es aufgelöst wird bei der ersten Variante unten auf, um es zu sehen.

Dynamische Bilder

Ein dynamisches Bild wird beschrieben statt geliefert und nimmt dieselben Prompt-Slots wie ein dynamischer Absatz.

negativePrompt verdient hier seinen Platz mehr als irgendwo sonst. Generierte Bilder scheitern auf vorhersehbare Weise — eingebackener Text, erfundene Logos, erkennbare Gesichter — und der Slot schließt das einmalig aus, im Node.

Varianten

import { Image, useState } from "docxcelerate/template";
import type { SampleData } from "../sample-data.ts";

/**
 * Every field is a plain prop, computed from state before the element is
 * returned — so a signature that varies by manager needs no branching in the
 * template that places it.
 */
export const Signature: Image = () => {
  const [state] = useState((data: SampleData) => ({
    src: data.signatureUrl,
    manager: data.managerName,
  }));

  return (
    <Image
      id="signature"
      src={state.src}
      alt={`Signed by ${state.manager}`}
      width={180}
      height={60}
    />
  );
};

{
  "id": "signature",
  "kind": "image",
  "mode": "static",
  "path": "assets/signature-lindqvist.png",
  "alt": "Signed by Tomas Lindqvist",
  "width": 180,
  "height": 60
}

import { Image, useSetPlaceholders, useSetPrompts, useState } from "docxcelerate/template";
import type { SampleData } from "../sample-data.ts";

/**
 * The same prompt set as a dynamic paragraph, for artwork the engine produces
 * rather than something you hold. The placeholder is what previews show, so
 * the layout is settled before any image exists.
 */
export const CentrePhoto: Image = () => {
  const [state] = useState((data: SampleData) => ({ centreName: data.centreName }));

  useSetPrompts({
    generalPrompt: `A wide daylight photograph of the entrance to ${state.centreName}, ` +
      `people arriving, no text overlay.`,
    negativePrompt: "No logos, no recognisable faces, no stock-photo staging.",
  });

  useSetPlaceholders(`Photograph of ${state.centreName}`);

  return <Image id="centre-photo" />;
};

{
  "id": "centre-photo",
  "kind": "image",
  "mode": "dynamic",
  "placeholder": "Photograph of Riverside Leisure Centre"
}

Anmerkungen

• Nur eine data:-URI reist mit. Sie trägt die Bytes, also hat auch ein anderswo geschriebenes Dokument das Bild noch. Ein Pfad oder eine http-URL wird am Bildschirm gezeichnet, wo ein Browser sie laden kann, landet in einer .docx aber nur als Notiz: beim Packen wird nichts geladen und nichts von der Platte gelesen, denn die Maschine, die das Dokument schreibt, ist nicht die, auf der die Datei lag.
• Word bettet ein SVG nicht allein ein — gib ihm ein Raster über fallbackSrc. Der Bildschirm zeichnet das SVG, die Word-Datei bekommt das Raster.
• alt lohnt sich in beiden Fällen: es beschreibt das Bild in der Word-Datei, und ein Node, der noch kein Bild hat, druckt es an dessen Stelle.

Diese Seite auf GitHub bearbeiten ↗ Diese Seite als Markdown lesen