Home > database >  how to serve image locally not with online url on next statice export
how to serve image locally not with online url on next statice export

Time:10-18

So I have multiple image coming from online. But when I start next export the image aren't included in it and the image URL are stored online string So I want my image to be exported and saved locally not from the online API

How can I tell next to store image locally and serve from locally not from online url

CodePudding user response:

I am afraid that next does not know how to download images from the internet. Maybe you should just download them and serve them from your computer. This way Next will bundle those assets.

To do this put them into public directory at the root of your project (e.g. public/my-image.png) and reference them like src="/my-image.png"


From the Next documantation

Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/).

For example, if you add an image to public/me.png, the following code will access the image:

import Image from 'next/image'

function Avatar() {
  return <Image src="/me.png" alt="me" width="64" height="64" />
}

export default Avatar
  • Related