Automatically change image based on breakpoint in NextJS application/XMCloud Pages editor with Tailwind css
This could be useful if you want to change image based on break point. I've cloned the existing Image component and created a ResponsiveImage component. This component is same as Image.tsx . This file uses the NextImage component and understandably doesn't have the capability to display different images based on breakpoint and that is what this note is about. Here is the original code highlighted for reference: With that context, In the new ResponsiveImage.tsx file, i added a method named ArtDirectedImage: ////// ///// Since a new template is created as part of cloning the Image rendering, I modified the template to accommodate the new fields in the new ResponsiveImage template as follows: Changes on top of responsiveimage.tsx file to accommodate the new fields - MobileImage and TabletImage: ///////// /////// Also, ensure Image is imported on top: import Image from 'next/image' The Default method must return this body that accommodates image change on-the-fly: //////
