next-image-loader
1. Write withImageLoader
in next.config.js
.
const { withImageLoader } = require('next-image-loader')
module.exports = withImageLoader({
// write your next.js configuration values.
})
2. Create image-loader.config.js
in your project root.
import { imageLoader } from 'next-image-loader/image-loader'
imageLoader.loader = ({ src, width, quality }) => {
return 'https://res.cloudinary.com/demo/image/upload' +
`/w_${width}/q_${quality || 75}/${src.replace(/^\//, '')}`
}
<Image src="/beach_huts.jpg" priority width={712} height={457} />

<Image src="/beach_huts.jpg" width={712} height={457} quality={5} />
