我有一个在多个网站中使用的库。其中一个在 Next JS 上运行，我想将组件 next/image 用于网站上的所有图像，而不影响其他不使用 NextJS 的网站。为此，我必须有条件地更改库中现有的 Image 组件并切换到 next/image，因此所有使用 Image 的组件现在都使用 next/image。有没有办法做到这一点？
如何有条件地在 React 库上使用 next/image 组件？
IT技术
reactjs
next.js
2022-07-26 02:05:38
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;
现在，为了使其健壮，您需要正确修改您的自定义Image组件。我列出了一些需要注意的事项：
next/image添加 wrapperspans，而 normalimg不会做这样的事情。所以要保持跨框架的 UI 一致。用Next.jsimg为你做的同样的方式包装。img标签可以在没有高度和宽度的情况下创建，而next/image组件不能（除非您使用静态导入），您可以通过检查是否src是对象来测试这个东西。检查 Next.js Image 组件和简单
img元素之间的不同之处。查看差异是否与您的库的用例有关。如果是这样，那么尝试弥合next/image和之间的差距img。显然，您只需要修复布局内容，如果您希望两者完全相同，您一开始就不会使用不同的东西。next/image修复组件后，仅使用自定义组件和自定义组件都支持的功能img。