如何将Heroku部署的API添加到Vercel图像优化条目

Question

我的前端部署在Vercel上，后端部署在Heroku上。

为了显示图像，我应该如何将API端点添加到next.config.js文件中？

我尝试过的：

herokuapp.com

my-api-link.herokuapp.com

my-api-link.herokuapp.com/uploads(我的静态文件的路径(

我也尝试将https://前缀添加到条目中。

还有什么我错过的吗，比如Heroku的特定优化器？

谢谢！

Answer 1

我在vercel部署中也收到了400个INVALID_IMAGE_OPTIMIZE_REQUEST错误，但不是本地错误。

通过添加图像加载程序修复https://nextjs.org/docs/api-reference/next/image#loader

import Image from 'next/image'
const myLoader = ({ src, width, quality }) => {
return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}
const MyImage = (props) => {
return (
<Image
loader={myLoader}
src="me.png"
alt="Picture of the author"
width={500}
height={500}
/>
)
}