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

wvt8vs2t  于 2022-11-13  发布在  其他
关注(0)|答案(1)|浏览(134)

我的前端部署在Vercel,后端部署在Heroku。
我应该如何将API端点添加到我的next.config.js文件中,以便显示我的图像?
我尝试过的方法:
herokuapp.com
my-api-link.herokuapp.com
my-api-link.herokuapp.com/uploads(静态文件的路径)
我也尝试将https://前缀添加到条目中。
我还遗漏了什么东西吗,比如Heroku的一个特定优化器?
谢谢你!

nc1teljy

nc1teljy1#

我也在我的vercel部署上得到了400个INVALID_IMAGE_OPTIMIZE_REQUEST错误,但不是在本地。
通过添加图像加载程序www.example.com修复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}
    />
  )
}

相关问题