Question

我知道在使用没有打字稿的 nextjs 图像组件时，需要在 next.config.js 中配置 url。但我不确定为什么这不适用于打字稿。

"...., 未在您的 next.config.js 中的图像下配置查看更多信息：https://nextjs.org/docs/messages/next-image-unconfigured-host"

解决方法是什么？或者是我使用常规 img 标签的唯一选择？

列表项

图像组件：

  <Image
        src="https://images.unsplash.com/photo-1621794279356-0150106a4b45?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1"
        alt="blog title"
        width="100"
        height="100"
      />

next.config.ts

export const images = {
  domains: [
    "images.unsplash.com"
  ],
};

Answer 1

我认为您最好在打字稿项目中使用 next.config.js 来配置 next 而不是 next.config.ts。这应该是 .js 中的唯一文件。

如果你坚持使用next.config.ts，你可以参考这个issue。

但同样，有些可能会减慢启动时间，有些仍然需要 next.config.js 和 next.config.ts

Answer 2

Next.js 最终会查找您可能没有的 next.config.js 文件。

要么将 .ts 配置编译为 .js 配置，要么直接创建一个 next.config.js 文件。

module.exports = {
    images: {
        domains: ['images.unsplash.com']
    }
}

Nextjs：下一个/图像打字稿

2 个答案: