如何在默认 PUBLIC 目录之外的 Next.js 中使用 PNG 图像？

Question

我看到能够使用 Public 文件夹以外的另一个目录使用图像的替代方法是使用 Next-Images 库，但我按照文档中的描述正确地完成了所有设置，我在网上看过几个视频，但没有效果，我只能加载 svgs。我在我的项目中使用打字稿。关于打字，我注意到了一个细节，我们必须添加这个参考：

/// <reference types="next-images" />

变成这样：

/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />
/// <reference types="next-images" />

到下一个-env.d.ts文件，但是每次我运行 yarn dev 命令时，添加的引用都会自动删除。

我的 next.config.js 文件：

const withImages = require('next-images');

module.exports = withImages({
   inlineImageLimit: false,
   esModule:true,
});

我注意到的另一件事是：在编译项目时，通过浏览器控制台标记<img src="">，在src中是路径：

/_next/static/images/cora-c562c6fa203473521a5dc5b15a841192.jpg

因为我通过浏览器控制台手动设置了其他路径，所以它有效：

/_next/static/image/src/assets/cora.e76cddfc04ca9d4b8a3868b2c40e3b7f.jpg

因此，如果有人知道我是否遗漏了我可能没有完成的任何设置、可能有帮助的视频或文档中的详细信息，我将不胜感激。

下一版本：11.0.1 打字稿版本：4.3.5 Next-Images 版本：1.8.1

Answer 1

在您的 tsconfig.json 中，将 next-env.d.ts 添加到 exclude 数组：

{
  // ...
  "exclude": ["node_modules", "next-env.d.ts"],
  "include": ["**/*"]
}

创建一个新文件 custom.d.ts 并添加：

/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next-images" />

在next.config.json中：

const withImages = require('next-images');

module.exports = withImages({
  images: {
    disableStaticImages: true,
  },
});

请注意，您的用例根本不需要使用 next-images。 Next.js 现在开箱即用。所以使用默认配置（一个新鲜的create-next-app），你可以直接做：

import Image from 'next/image';
import img from '../path/to/img.png';

<Image src={img} alt="some text"/>

// or with img tag:

<img src={img.src} height="100" width="100" alt="some text"/>

参考：Image Imports

如何在默认 PUBLIC 目录之外的 Next.js 中使用 PNG 图像？

How to use PNG images in Next.js outside the default PUBLIC directory?

typescript

reactjs

next.js

next-images