Cara Yang Betul untuk Menambah Imej pada E-mel dalam Next.JS

Jika anda sedang membina ciri seperti pengesahan atau e-mel transaksi dalam apl Next.js anda, kemungkinan besar anda perlu memasukkan imej dalam e-mel anda. Tetapi tunggu—sebelum anda menganggap anda boleh menambah imej dengan cara yang sama seperti yang anda lakukan untuk halaman web biasa, terdapat sedikit kelainan apabila ia berkaitan dengan pelanggan e-mel.

Anda mungkin fikir ini berkesan:

import Image from 'next/image';

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

Atau mungkin ini:

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

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

Kedua-dua pendekatan akan menyebabkan imej anda dimuatkan di [host]/email-image.png atau /_next/static/[hash].png dalam penyemak imbas. Penyemak imbas tahu apa yang perlu dilakukan di sini—ia menyimpulkan hos (seperti https://acme.org), mengambil imej dan memaparkannya.

Tetapi inilah penyepaknya: Pelanggan e-mel tidak mengenali hos anda. Daripada melihat imej yang bagus, pengguna anda melihat... tiada apa-apa. Oleh kerana /_next/static/[hash].png tidak menyelesaikan kepada sumber yang sah, ia tidak tahu dari mana hos imej itu harus datang. Pada asasnya, tiada URL lengkap yang menunjuk kepada sumber sebenar di internet, jadi imej itu rosak.

Apakah Pembetulan?

Mudah: Gunakan CDN. Muat naik imej yang anda perlukan untuk e-mel ke rangkaian penghantaran kandungan (CDN) seperti Cloudinary. Kemudian, rujuk URL yang dijana dalam e-mel anda. Begini rupanya:

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

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

Boom! Kini klien e-mel tahu di mana untuk mencari imej anda. Krisis dapat dielakkan.

Mengehos Keseluruhan Direktori awam Anda pada CDN

Jika anda ingin teliti (atau anda memuatkan banyak imej), anda boleh mengkonfigurasi Next.js untuk menyampaikan semua aset statik anda daripada CDN.

Begini cara anda menyediakannya dalam next.config.ts anda:

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;
};

Ini memberitahu Next.js untuk menambahkan URL CDN ke semua fail statik dalam pengeluaran. Untuk butiran lanjut, anda boleh menyemak dokumentasi rasmi Next.js.

Sekarang, apabila anda menggunakan imej dalam komponen e-mel anda seperti ini:

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

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

Ia akan menjana URL secara automatik seperti https://cdn.acme.org/_next/static/[hash].png, dan imej e-mel anda akan dimuatkan tanpa sebarang halangan.

Atas ialah kandungan terperinci Cara Yang Betul untuk Menambah Imej pada E-mel dalam Next.JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!