Sha256: c76c02d3d40d638d85d49d2d54becb2eb589ebb1cd123d44585a6871031bae1e
Contents?: true
Size: 1.44 KB
Versions: 1919
Compression:
Stored size: 1.44 KB
Contents
import React from 'react'
import Image from '../_image'
import Body from '../../pb_body/_body'
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
Version data entries
1,919 entries across 1,919 versions & 2 rubygems