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 (the src of the image)
• caption (will also be used as alt)
• credits

These display props are optional:

• className (applied to the container)
• imgClassName (applied to the img element)
• captionClassName (applied to the caption container)
• creditsClassName (applied to the credits container)
• placeholderImage (if no url provided, this placeholder URL is rendered)
• separator (string to use as a separator between credits, default "|")
• showCredits (set false 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.