# @dmn-arc-core-components/element_image

> A simple image as an Arc Core Component.

Latest version **1.0.0-alpha** (published 2021-11-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install @dmn-arc-core-components/element_image
pnpm add @dmn-arc-core-components/element_image
yarn add @dmn-arc-core-components/element_image
bun add @dmn-arc-core-components/element_image
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-alpha |
| Published | 2021-11-05 |
| First published | 2021-11-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 28 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Matt Nelson |
| Maintainers | jfoxworth |

## Links

- npm: https://www.npmjs.com/package/@dmn-arc-core-components/element_image
- Repository: https://github.com/dallasnews/dmn-arc-core-components/packages/element_image
- npm.io page: https://npm.io/package/@dmn-arc-core-components/element_image

## Dependencies (1)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.4.3

## Recent versions

- 1.0.0-alpha (latest) — 2021-11-05

## README

## 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](https://github.com/wapopartners/core-components/tree/dev/packages/content-source_content-api-v4)
  for more resizer config info)

# How do I use it?

```javascript
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](./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.

---
_Source: https://npm.io/package/@dmn-arc-core-components/element_image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._