Der richtige Weg, Bilder zu E-Mails in Next.JS hinzuzufügen

Wenn Sie Funktionen wie Authentifizierung oder Transaktions-E-Mails in Ihrer Next.js-App erstellen, müssen Sie wahrscheinlich Bilder in Ihre E-Mails einfügen. Aber warten Sie – bevor Sie davon ausgehen, dass Sie Bilder auf die gleiche Weise wie bei normalen Webseiten hinzufügen können, gibt es eine kleine Besonderheit bei E-Mail-Clients.

Sie denken vielleicht, das funktioniert:

import Image from 'next/image';

export default function Page() {
  return (
    <Image
      src="/email-image.png" // From your public folder
      // Other props...
    />
  );
}

Oder vielleicht das:

import Image from 'next/image';
import img from '../email-image.png';

export default function Page() {
  return (
    <Image
      src={img}
      // Other props...
    />
  );
}

Beide Ansätze führen dazu, dass Ihr Bild unter [host]/email-image.png oder /_next/static/[hash].png in einem Browser geladen wird. Der Browser weiß, was hier zu tun ist – er leitet den Host ab (z. B. https://acme.org), greift auf das Bild und zeigt es an.

Aber hier ist der Clou: E-Mail-Clients kennen Ihren Host nicht. Anstatt ein schönes Bild zu sehen, sehen Ihre Benutzer ... nichts. Da /_next/static/[hash].png nicht in eine gültige Ressource aufgelöst wird, weiß es nicht, von welchem ​​Host das Bild stammen soll. Im Wesentlichen gibt es keine vollständige URL, die auf eine echte Ressource im Internet verweist, sodass das Bild kaputt geht.

Was ist die Lösung?

Einfach: Verwenden Sie ein CDN. Laden Sie die Bilder, die Sie für E-Mails benötigen, in ein Content Delivery Network (CDN) wie Cloudinary hoch. Verweisen Sie dann in Ihren E-Mails auf die generierte URL. So sieht es aus:

import { Img } from '@react-email/components';

export default function Page() {
  return (
    <Img
      src="https://cdn.acme.org/email-image.png"
      // Other props...
    />
  );
}

Boom! Jetzt weiß der E-Mail-Client, wo sich Ihr Bild befindet. Krise abgewendet.

Hosten Sie Ihr gesamtes öffentliches Verzeichnis auf einem CDN

Wenn Sie gründlich vorgehen möchten (oder viele Bilder laden), können Sie Next.js so konfigurieren, dass alle Ihre statischen Assets von einem CDN bereitgestellt werden.

So würden Sie es in Ihrer next.config.ts einrichten:

import type { NextConfig } from 'next';
import { PHASE_DEVELOPMENT_SERVER } from 'next/constants';

export default (phase) => {
  const isDev = phase === PHASE_DEVELOPMENT_SERVER;

  const nextConfig: NextConfig = {
    assetPrefix: isDev ? undefined : 'https://cdn.acme.org',
  };

  return nextConfig;
};

Dadurch wird Next.js angewiesen, die URL des CDN allen statischen Dateien in der Produktion voranzustellen. Weitere Informationen finden Sie in der offiziellen Next.js-Dokumentation.

Wenn Sie nun in Ihrer E-Mail-Komponente ein Bild wie dieses verwenden:

import { Img } from '@react-email/components';
import img from '../email-image.png';

export default function Page() {
  return (
    <Img
      src={img}
      // Other props...
    />
  );
}

Es wird automatisch eine URL wie https://cdn.acme.org/_next/static/[hash].png generiert und Ihre E-Mail-Bilder werden problemlos geladen.

Das obige ist der detaillierte Inhalt vonDer richtige Weg, Bilder zu E-Mails in Next.JS hinzuzufügen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!