Hi @final silo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#react-lottie images loaded several times
eternal lanceBOT
Hmm, I don't know enough to give you a confident answer yet. The information extracts provided do not contain specific details about using react-lottie with Next.js or how to handle issues with images in animations being loaded multiple times.
However, I can share some general advice on optimizing image loading in Next.js. You can use the next/image component for loading images, which provides several optimizations like lazy loading, prioritizing critical images, and more. You can also configure the Time to Live (TTL) for cached optimized images using the minimumCacheTTL property in your next.config.js file. This can help control how often images are reloaded.
Here's an example of how to use the next/image component and set minimumCacheTTL:
// In your component
import Image from 'next/image'
export function Avatar() {
return <Image src="/me.png" alt="me" width="64" height="64" />
}
// In next.config.js
module.exports = {
images: {
minimumCacheTTL: 60,
},
}
For more details, you can refer to the Next.js documentation on image optimization (https://nextjs.org/docs/app/building-your-application/optimizing/images) and static assets (https://nextjs.org/docs/app/building-your-application/optimizing/static-assets).
For issues specific to react-lottie, you might want to check their documentation or community resources.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
final silo
@eternal lance Unfortunately im not using the Image component provided by Next.js, images are loaded directly by lottie
maybe another good advice ?
eternal lanceBOT
Let me check the knowledge base for you. One moment! :books:
I'm sorry, but the information extracts provided do not contain specific details about handling image loading issues with Lottie animations in Next.js.
However, it's worth noting that image optimization in Next.js is primarily handled through the next/image component. If you're not using this component and are experiencing issues with image loading in your Lottie animations, the problem might be related to how Lottie handles image loading rather than a Next.js issue.
For issues specific to Lottie, you might want to check their documentation or community resources. It could also be beneficial to look into how your animations are structured, as certain animation configurations might cause excessive image loading.
If you're open to using third-party services, you might consider using a cloud provider to optimize your images. This can be configured in your next.config.js file. Here's an example:
module.exports = {
images: {
loader: 'custom',
loaderFile: './my/image/loader.js',
},
}
This loaderFile must point to a file relative to the root of your Next.js application. The file must export a default function that returns a string, for example:
export default function myImageLoader({ src, width, quality }) {
return `<https://example.com/${src}?w=${width}&q=${quality> || 75}`
}