typescript - 在 TypeScript 中使用 next/image 时，获取主机未配置错误

Question

我知道在不使用 TypeScript 的情况下使用 Next.js 图像组件时，需要在 next.config.js 中配置 URL ，但我不确定为什么这不适用于 TypeScript。

...., is not configured under images in your next.config.js See moreinfo: 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.js 最终会寻找一个 next.config.js文件以从中获取配置(如果您使用 next.config.ts ，则很可能没有配置)。
要么你编译你的 .ts配置到 .js配置，或者简单地创建一个 next.config.js文件代替。

// next.config.js
module.exports = {
    images: {
        domains: ['images.unsplash.com']
    }
}

从 Next.js 12 开始，您现在可以通过将配置文件重命名为 next.config.mjs 来继续使用 ES 模块。 .虽然这与使用 TypeScript 不完全相同，但至少您可以保持语法一致。

// next.config.mjs
export default {
    images: {
        domains: ['images.unsplash.com']
    }
}