为外域图片配置Next Js

Question

我遇到了 next.config.js 的问题。我目前正在运行一个项目，下一个 js 打字稿。在这个项目中，我正在使用 ThreeJs，@react-three/fiber & @react-three/drei。但我还想包括一些来自特定 public YouTube url 的图片。在较旧的项目中，我已经实现了这个而无需像这样在里面使用 ThreeJs：

module.exports = {
reactStrictMode: true,
images: {
    domains: ['i3.ytimg.com', 'img.youtube.com'],
    formats: ['image/webp'],
},

}

在我的 next.config.js 上，它仍然很有效。但是当我把它放在我当前的项目中并尝试加载图像时，我收到错误消息：

Error: Invalid src prop ([url]) on next/image, hostname "img.youtube.com" is not configured under images in your next.config.js

当前next.config.js文件

module.exports = {
reactStrictMode: true,
images: {
    domains: ['i3.ytimg.com', 'img.youtube.com'],
    formats: ['image/webp'],
},
}


const withTM = require('next-transpile-modules')(['three', '@react-three/fiber', '@react-three/drei']);

module.exports = withTM();

现在在我的组件上：

export default function ProjectCard({ song }: { song: Lyrics }) {
const img = hqDefault(song.thumbnailURL);

return (
    <div>
        {song.singer}
        <Image src={img} alt={`${song.singer} ${song.title}`} layout="fill" />
    </div>
)
}

hq默认函数：

export const hqDefault = (url: string): string => {
    return `https://img.youtube.com/vi/${url}/hqdefault.jpg`;
}

如有任何帮助，我们将不胜感激！

Answer 1

您应该导出单个配置对象。

首先，安装'next-compose-plugins'：

npm install --save next-compose-plugins

导入它：

const withPlugins = require('next-compose-plugins');

然后像这样导出您的配置：

module.exports = withPlugins([
    [withTM]
], nextConfig);

为外域图片配置Next Js

Configure Next Js For Images For External Domains

javascript

image

typescript

reactjs

next.js