如何将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}
    />
  )
}