如何有条件地在 React 库上使用 next/image 组件？答案

【问题标题】：How can I conditionally use next/image component on React library?如何有条件地在 React 库上使用 next/image 组件？
【发布时间】：2021-07-13 13:50:17
【问题描述】：

我有一个在多个网站中使用的库。其中一个在 Next JS 上运行，我想将组件 next/image 用于网站上的所有图像，而不影响其他不使用 NextJS 的网站。为此，我必须有条件地更改库中现有的 Image 组件并切换到 next/image，因此所有使用 Image 的组件现在都使用 next/image。有没有办法做到这一点？

【问题讨论】：

不清楚你在问什么。请参阅How to Ask 并提供一些上下文示例代码。
我其实明白你的意思。我认为没有办法检测您的库是否在 NextJS 服务器上运行。我想你可以创建一个变量，你可以在不同类型的服务器中设置。如果你能展示一些代码和你正在做的事情的结构，我可能会帮助你找到一种方法。
另外，您的库是在服务器端还是在客户端运行。请记住，了解您是否使用 NextJS 非常重要

标签： reactjs next.js

【解决方案1】：

对于初学者，您需要执行以下操作：

在某处定义您自己的Image 组件（如果可用，则使用next/image）并在您使用img 的任何地方使用它：

// utils/image.js

import React from "react";

const Image = ({ src, ...props }) => {
  try {
    return React.createElement(require.resolve("next/image").default, {
      src: typeof src === "string" ? src : src.src,
      ...props
    });
  } catch {
    console.log("Not using Next.js");
    return React.createElement("img", { src, ...props });
  }
};

export default Image;

在 CRA 和 Next.js 中的用法相同：

// example component

import Image from "../utils/image";
import bg from "../assets/bg.jpg";

const Foo = () => <Image src={bg} height="640" width="959" />;

export default Foo;

这里是 CodeSandbox：CRA、Next.js

现在，为了使其更强大，您需要正确修改您的自定义 Image 组件。我列出了一些需要注意的事项：

next/image 添加包装器spans，而普通img 不会做这样的事情。所以要保持跨框架的 UI 一致。包装 img 就像 Next.js 为你做的一样。
img标签可以创建没有高度和宽度，而next/image组件不能（除非你使用静态导入），你可以通过检查src是否是一个对象来测试这个东西。
检查 Next.js Image 组件和简单的img 元素之间的不同之处。查看差异是否与您的库的用例有关。如果是这样，那么尝试弥合next/image 和img 之间的差距。显然，您只需要修复布局内容，如果您希望两者完全相同，则一开始就不会使用不同的东西。
修复您的组件后，仅使用next/image 和您的自定义img 组件都支持的功能。

【讨论】：