Image Not Rendering in Nuxt.js due to Base64 Encoding implementing Large Files
I'm having a hard time understanding I'm experiencing issues rendering a large image in my Nuxt.js application. The image, which is approximately 5MB, is encoded in Base64 and passed as a prop to a component. While smaller images work perfectly fine, this larger image fails to render and I receive the following behavior in the console: `Uncaught DOMException: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.` I tried increasing the maximum size for data URLs in my browser settings, but it didn’t resolve the scenario. Here's the component where I'm attempting to render the image: ```vue <template> <div> <img :src="imageSrc" alt="Large Image" v-if="imageSrc" /> <p v-else>Loading image...</p> </div> </template> <script> export default { props: ['imageSrc'], computed: { base64Image() { return `data:image/jpeg;base64,${this.imageSrc}`; } } }; </script> ``` I've also tried breaking the image into smaller chunks and using the `<nuxt-img>` component, but it seems like there's a limitation with that approach as well. Is there a recommended best practice for handling large images in Nuxt.js? Should I consider using an alternative method for loading these images? Any insights would be greatly appreciated! I'm working with Javascript in a Docker container on CentOS. Thanks for your help in advance!