在 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中文网其他相关文章！