Element: Image
What does this do?
When used in a Fusion Project, this Core Component can be used to render an image.
These props are set automatically according to the structure of the content:
-
url
(thesrc
of the image) -
caption
(will also be used asalt
) credits
These display props are optional:
-
className
(applied to the container) -
imgClassName
(applied to theimg
element) -
captionClassName
(applied to the caption container) -
creditsClassName
(applied to the credits container) -
placeholderImage
(if nourl
provided, this placeholder URL is rendered) -
separator
(string to use as a separator between credits, default "|") -
showCredits
(setfalse
to hide credits) -
sizePreset
(render a resized image - see the content API core component docs for more resizer config info)
How do I use it?
import Image from "@arc-core-components/element_image";
<Image {...imageContentElement} className="your-classes" />;
Take a look in the src
file to see a suggested implementation, in
index.mdx
How can I view what's in there quickly?
Run npm i && npm run docz:dev
after cloning to see what is within.
Testing & Linting
We are using Jest and XO for testing and linting.
We are using Husky to run a pre-push hook, preventing un-linted or code that fails tests from making it into the repo.
To test: npm test
To lint: npm run lint
- This will also fix any simple linter errors
automatically.
To push without testing or linting: git push --no-verify
- This can often
be helpful if you just need to push a branch for demonstration purposes or for
help.