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

Question

我看到了另一种可以使用公用文件夹以外的目录使用图像的方法，就是使用Next-Image库，但是我按照文档中的描述正确地完成了所有的设置，我在互联网上看到了几个视频，但是没有什么工作，我只能加载它svgs。我在我的项目中使用打字稿。在打字方面，我注意到了一个细节，我们必须添加以下引用：

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

变成这样：

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

但是，每次我运行yarn dev命令时，添加的引用都会自动删除。

我的next.config.js文件：

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

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

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

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

由于您的浏览器控制台中有另一条路径，所以它可以运行：

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

因此，如果有人知道我是否遗漏了任何我可能没有做过的设置，或者一个可能有帮助的视频，或者文档中的一个细节，我将非常感激。

下一版: 11.0.1打字本版本: 4.3.5下一张图片版本: 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"/>

参考：图像进口