NextJS自定义Image Loader未生效，报错缺少loader属性

以下是导致配置失效并触发报错的核心问题及解决方法：

1. Loader函数参数错误 #

你的自定义loader函数中使用了未声明的height变量，这会引发运行时错误，导致Next.js无法正常加载全局配置的loader，进而触发"missing loader prop"提示。

修复后的loader代码（根据你的CDN规则调整，若不需要height则直接移除相关部分）：

export default function customImageLoader({ src, width, quality }) {
    // 移除未定义的height变量，或根据CDN需求添加height参数
    return `https://blabla/${width}/${src}?q=${quality || 75}`
}

如果你的CDN格式确实需要widthxheight的结构，需先在函数参数中解构height：

export default function customImageLoader({ src, width, height, quality }) {
    return `https://blabla/${width}x${height}/${src}?q=${quality || 75}`
}

2. next.config.js语法不完整 #

你提供的配置代码末尾缺少闭合的}，导致配置文件语法错误，Next.js无法正确解析配置内容。

修复后的next.config.js：

module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './optimization/loader.js',
  },
}

3. 开发服务器未重启 #

修改next.config.js后必须重启Next.js开发服务器，否则新配置不会生效。请停止当前服务后重新启动。

4. 路径与文件名校验 #

确保optimization/loader.js确实存在于项目根目录，且文件名、目录名无拼写错误（Linux/macOS环境区分大小写）。

内容的提问来源于stack exchange，提问作者Tufan Çağkan Söymen