9.14.1
A responsive image component.
import React from 'react' import { Image } from '../../' const DefaultImage = (props) => { return ( <> <Image alt="picture of a misty forest" size="xs" url="https://unsplash.it/500/400/?image=634" {...props} /> <Image alt="picture of a misty forest" size="sm" url="https://unsplash.it/500/400/?image=634" {...props} /> <Image alt="picture of a misty forest" size="md" url="https://unsplash.it/500/400/?image=634" {...props} /> <Image alt="picture of a misty forest" size="lg" url="https://unsplash.it/500/400/?image=634" {...props} /> <Image alt="picture of a misty forest" size="xl" url="https://unsplash.it/500/400/?image=634" {...props} /> <Image alt="picture of a misty forest" url="https://unsplash.it/500/400/?image=634" {...props} /> </> ) } export default DefaultImage
import React from 'react' import { Image } from '../../' const RoundedImage = (props) => { return ( <> <Image alt="" rounded size="xs" url="https://unsplash.it/500/400/?image=634" {...props} /> <Image alt="" rounded size="sm" url="https://unsplash.it/500/400/?image=634" {...props} /> <Image alt="" rounded size="md" url="https://unsplash.it/500/400/?image=634" {...props} /> <Image alt="" rounded size="lg" url="https://unsplash.it/500/400/?image=634" {...props} /> <Image alt="" rounded size="xl" url="https://unsplash.it/500/400/?image=634" {...props} /> </> ) } export default RoundedImage
import React from 'react' import { Body, Image } from '../../' const CustomErrorImage = (props) => { return ( <> <Body text="Handle when an image fails to load or a broken link is passed. This is not neccessary most of the time." /> <br /> <Body text="Alter the display when the image fails to load:" /> <Image alt="This is the alt text!" onError={(e) => e.target.style.color = 'red'} rounded size="xs" url="not_a_valid_url" {...props} /> <br /> <br /> <Body text="Give it an error class:" /> <Image alt="This is the alt text!" onError={(e) => e.target.classList.add('image-error')} rounded size="sm" url="not_a_valid_url" {...props} /> <br /> <br /> <Body text="Set an inline style" /> <Image alt="This is the alt text!" onError={(e) => e.target.style.outline = '1px solid red'} rounded size="md" url="not_a_valid_url" {...props} /> <br /> <br /> <Body text="Hide it completely!" /> <Image alt="This is the alt text!" onError={(e) => e.target.style.display = 'none'} rounded size="md" url="not_a_valid_url" {...props} /> </> ) } export default CustomErrorImage