# 5.3 Dynamic Images

Let's make our app a bit visually pleasing by adding some images. The perfect place to do this is in the `TaskListEmptyState` component.

### Step 1: Download Image

Download the following image and put it at `ssets/no-tasks-light.png`.

![](https://3369392052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjsIbS1DfhqT8BS3Ui%2Fuploads%2FGVkwQJqrpx6w2EJyUAM0%2Fno-tasks-light.png?alt=media\&token=923fab1c-9625-4d5f-8cd6-679967f263db)

### Step 2: Add the Image to the Plugin

Modify your plugin to add an `assets` property like the in the code below:

{% code title="src/index.ts" %}

```typescript
import { createPlugin } from '@bluebase/core';

import { ToDoAppIcon } from './components/ToDoAppIcon';
import { filters } from './filters';
import { lang } from './lang';
import { routes } from './routes';
import { screens } from './screens';

export default createPlugin({
	key: 'tasks',
	name: 'Tasks',
	description: 'A todo app made with BlueBase framework.',

	assets: {
		NoTasks: require('../assets/no-tasks-light.png'),
	},

	// ... Other properties
});
```

{% endcode %}

Basically, we're telling BlueBase that the said image has an ID `NoTasks` and where to find it. Now we can just reference this image by this ID and BlueBase will take care of loading and rendering it across formats.

### Step 3: Use the Image in the Component

Modify the `ComponentState` node in the `TaskListEmptyState` component and add a prop `imageSource="NoTasks"` as shown in the code below:

{% code title="src/components/TaskListEmptyState/TaskListEmptyState.tsx" %}

```jsx
<ComponentState
    imageSource="NoTasks"
    title={__('No tasks')}
    imageProps={{ resizeMode: 'contain' }}
    description={__('Start by creating a new task')}
    actionTitle={__('Create Task')}
    actionOnPress={goToCreate}
    actionProps={{ size: 'small', color: 'success', variant: 'outlined' }}
    {...props}
/>
```

{% endcode %}

Now when you refresh the app, you should see an image in the empty state.

![](https://3369392052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjsIbS1DfhqT8BS3Ui%2Fuploads%2FUH83IzWVpbfHwhTSsIe5%2FScreenshot%202022-04-25%20at%2011.43.53%20PM.png?alt=media\&token=229ea0e1-97c6-4c9e-976e-85e30404830b)

### Step 4: Use a Different Image for Dark Mode

Sometimes we need a different variant of an image for dark mode. Don't worry, we have got you covered here as well.

Download the following image and put it at: `assets/no-tasks-dark.png`.

![](https://3369392052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjsIbS1DfhqT8BS3Ui%2Fuploads%2FW6zophBGoIPlUtwYOmdP%2Fno-tasks-dark.png?alt=media\&token=44af563f-6743-462c-bce4-214c44a7f0ab)

Now, modify the assets property in the plugin to match the following:

```typescript
assets: {
    NoTasks_dark: require('../assets/no-tasks-dark.png'),
    NoTasks_light: require('../assets/no-tasks-light.png'),
},
```

Try refreshing your app. You'll see different images will be rendered in light mode and dark mode.

![Light Mode](https://3369392052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjsIbS1DfhqT8BS3Ui%2Fuploads%2FUH83IzWVpbfHwhTSsIe5%2FScreenshot%202022-04-25%20at%2011.43.53%20PM.png?alt=media\&token=229ea0e1-97c6-4c9e-976e-85e30404830b) ![Light Mode](https://3369392052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjsIbS1DfhqT8BS3Ui%2Fuploads%2F6xROq2LsWFtupKLYC0J7%2FScreenshot%202022-04-25%20at%2011.43.59%20PM.png?alt=media\&token=9a0c78da-b44d-40b8-b902-6e16731256a7)

![Dark Mode](https://3369392052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjsIbS1DfhqT8BS3Ui%2Fuploads%2FiAGCwxuZkGC41nffeIny%2FScreenshot%202022-04-25%20at%2011.43.40%20PM.png?alt=media\&token=a6aa0ed6-53e3-47b1-bae2-7aa78ebb1f74) ![Dark Mode](https://3369392052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjsIbS1DfhqT8BS3Ui%2Fuploads%2Fa2ve6CUM4KBnQambeDjY%2FScreenshot%202022-04-25%20at%2011.43.43%20PM.png?alt=media\&token=551b080d-0390-4660-955d-f40aacb28b1d)

Basically, you can define a different image with the same ID (`NoTasks` in this example) for all of the following scenarios:

| Key                     | Use Case                                  |
| ----------------------- | ----------------------------------------- |
| NoTasks                 | Default version                           |
| NoTasks\_dark           | Dark mode version                         |
| NoTasks\_light          | Light mode verion                         |
| NoTasks\_desktop        | Desktop Screen Size version               |
| NoTasks\_mobile         | Mobile Screen Size version                |
| NoTasks\_desktop\_dark  | Desktop Screen Size version on Dark mode  |
| NoTasks\_mobile\_dark   | Mobile Screen Size version on Dark mode   |
| NoTasks\_desktop\_light | Desktop Screen Size version on Light mode |
| NoTasks\_mobile\_light  | Mobile Screen Size version on Light mode  |