为外部域的图像配置下一个JS

Question

我对next.config.js有问题。我目前正在运行一个带有打字稿的Next JS的项目。在这个项目中，我正在与TrixJS合作， @react-three/fiber＆amp; @react-three/drei。但是我也想包括一些特定公共YouTube URL的图像。 在较旧的项目中，我已经实施了这样的内部三个J的实现：

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

}

在我的next.config.js上，它仍然像魅力一样起作用。但是，当我将其放入当前项目并尝试加载图像时，我会发现错误说：

错误：next/image上的无效src prop（[url]），hostName“ img.youtube.com”未在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>
)
}

HQDEFAULT函数：

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

任何帮助都将被应用！

Answer 1

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

首先，安装“下一代组合 - plugins”：

npm install --save next-compose-plugins

导入它：

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

然后像这样导出配置：

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