如何在 NextJS 13 中通过应用程序目录使用 SVG？

Question

我决定尝试一下app目录，但很多东西都被破坏了。例如，图像导入。png 工作得很好，但导入 SVG 图像会使其在/app.

例如，这个特定的 URL 仅适用于 fin /pages，不适用于/app：

import Logo from 'public/company.svg';

导入的图像对象（从组件内部）在控制台中如下所示：

{
  src: '/_next/static/media/company.99a082b8.svg',
  height: 32,
  width: 162
}

文件本身不存在于/media文件夹中。

如何将 SVG 图像导入 NextJS 13+ 项目？

更新：

我添加了 SVGR 以将 SVG 作为组件导入，一切正常，但它并没有解决构建问题。

Answer 1

@svgr/webpack 解决了这个问题，但是要使用 svg 图像作为 src，我们必须使用来自 next/image 的图像，如下所示。<img/>标签不起作用。

import Image from "next/image";
import SVGIMG from "../public/vercel.svg";

export default function Page() {
    return (
       <Image src={SVGIMG} alt={""}/>
    )
}

适用于下一个开发和下一个构建&&下一个启动！