如何在带有应用程序目录的 NextJS 13 中使用 SVG？

Question

我决定尝试app目录，但很多东西都坏了。 比如图片导入。 png 工作正常，但导入 SVG 图像会使其在/app中损坏。

例如，这个特定的 URL 只适用于/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={""}/>
    )
}

在下一个开发和下一个构建中工作 && 下一个开始！