## Background
Image component needs to be implemented in Codex.
### Description
The Image component is used to display visual content (e.g. photos, illustrations). This component is used to provide visual context to the content. We can use images as individual components in the interface or to provide visual context in other components (e.g. cards, dialogs).
### User stories
- As a designer and developer, I want to be able to reuse an image component to support the meaning or illustrate content in layouts and components.
### History
We've considered the introduction of image as a core Codex component. This wasn't listed as part of the big [[ https://phabricator.wikimedia.org/T277047 | design inventory of the Wikiverse ]] performed by the Product design team, though.
### Known use cases
##### Images within the interface
| {F36961694} | {F36961695} | {F36961697} | {F36961696} | {F36961702} | {F36961703} | {F36961704} | {F36961705} |
##### Images as part of other components
| {F36961724} | Portrait card with image |
| {F36961725} | Image within a popup |
| {F36961746} | Thumbnail with image |
| {F36961731} | Onboarding Dialog with image T332767 |
### Existing implementations
These artifacts are listed for historical context. The figma spec, linked below, is the source of truth for the new component.
**Wikimedia community:**
- **Design style guide:** -
- **OOUI:** -
- **Vue:** -
**External libraries:**
- [[ https://developer.microsoft.com/en-us/fluentui#/controls/web/image | Fluent Microsoft - Image component ]]
- [[ https://atlassian.design/components/image/examples | Atlassian - Image component ]]
- [[ https://ant.design/components/image | Ant Design - Image component ]]
- [[ https://gestalt.pinterest.systems/web/image | Gestalt Pinterest - Image component ]]
---
## Codex implementation
### Component task owners
- Designer: @bmartinezcalvo
- Developer: //add the main developer's name//
### Open questions
[] What does the image need to do from tech standpoint, lazy loading, etc?
[] Component's properties:
[] Do we want to implement fixed ratios as props?
[] Image customization (e.g. left, right, center)
[] Do we want an option to provide a specific px size? (use case from VE image settings)
### Design spec
// Once a component spec sheet has been created in Figma, remove the note stating that the spec is missing and link to the spec below. //
A component spec sheet has not been created yet.
| Component spec sheet |
#### Anatomy
//Designer should list the structure and properties of the component.//
#### Style
//Designer should list the visual features of the component.//
#### Interaction
//Designer should list interaction specifications.//
#### Documentation
//Designer should describe how the component should be documented, including configurable and standalone demos.//
---
## Acceptance criteria
### Minimum viable product
This task covers the minimum viable product (MVP) version of this component. MVP includes basic layout, default states, and most important functionality.
**MVP scope**
- [] //List all parts of the MVP scope for this component//
**Design**
- [] Design the Figma spec sheet and add a link to it in this task
- [] Update the component in the [Figma library](https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/%E2%9D%96-Codex-components?node-id=1891%3A4420&viewport=287%2C338%2C0.28). //This step will be done by a DST member.//
**Code**
- [] Implement the component in Codex
### Future work
- //If applicable, list future work that should be done for this component after the MVP is implemented as part of this task. You should open new, standalone tasks for all future work.//