在 Next.JS 中將圖像新增至電子郵件的正確方法

如果您要在 Next.js 應用程式中建立驗證或交易電子郵件等功能，您很可能需要在電子郵件中包含映像。但是等一下，在您認為可以像添加常規網頁一樣添加圖像之前，在電子郵件用戶端方面有一個小變化。

你可能認為這有效：

import Image from 'next/image';

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

或許是這個：

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

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

這兩種方法都會導致您的映像在瀏覽器中載入到 [host]/email-image.png 或 /_next/static/[hash].png 。瀏覽器知道在這裡要做什麼 - 它推斷主機（例如 https://acme.org），抓取圖像並顯示它。

但問題在於：電子郵件用戶端不知道您的主機。您的用戶沒有看到漂亮的圖像，而是…什麼也沒有看到。因為 /_next/static/[hash].png 無法解析為有效資源，所以它不知道映像應該來自哪個主機。本質上，沒有完整的 URL 指向互聯網上的真實資源，因此圖像會損壞。

解決方法是什麼？

簡單：使用 CDN。將電子郵件所需的圖像上傳到 Cloudinary 等內容傳遞網路 (CDN)。然後，在您的電子郵件中引用產生的 URL。它的外觀如下：

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

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

繁榮！現在電子郵件用戶端知道在哪裡可以找到您的圖像。危機避免了。

在 CDN 上託管您的整個公開目錄

如果您想要徹底（或要載入許多映像），您可以設定 Next.js 以從 CDN 提供所有靜態資源。

以下是在 next.config.ts 中進行設定的方法：

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

這告訴 Next.js 將 CDN 的 URL 新增到生產中的所有靜態檔案中。更多詳細信息，您可以查看 Next.js 官方文件。

現在，當您在電子郵件組件中使用圖像時，如下所示：

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

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

它會自動產生一個類似 https://cdn.acme.org/_next/static/[hash].png 的 URL，並且您的電子郵件圖片將順利載入。

以上是在 Next.JS 中將圖像新增至電子郵件的正確方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！