# Using with the graphics kit

Our graphics components are designed to work seemlessly with the [graphics kit](https://reuters-graphics.github.io/bluprint_graphics-kit/) as well as just about any Svelte-based page builder.

**There is, however, one gotcha to watch out for:**

When working with multimedia files like images or videos, components expect all paths to be 

✅ `https://reuters.com/graphics/.../myImage.jpg`

❌ `./myImage.jpg`

In the graphics kit, that means you'll need to prefix relative paths with the special [`asset`](https://svelte.dev/docs/kit/$app-paths#asset) SvelteKit helper that resolves the path to the root URL for your project. Many examples in these docs show how to do it. But it's also easy enough to demo again here!

```svelte
<script>
  import { FeaturePhoto } from '@reuters-graphics/graphics-components';

  // Import the asset helper if it's not already there.
  import { asset } from '$app/paths';
</script>

<!-- Use the asset helper to prefix the path to your image. -->
<FeautrePhoto src={asset('/imgs/myImage.jpg')} />
```