---
title: "Link to Media"
description: "This article explains what the link to media field is and how to configure it."
meta_title: "Link to Media"
category: "fields"
audience: developers
lastUpdated: "2025-11-06T01:07:50.000Z"
---

The link to media field allows content writers to select media from a repository's media library. All media formats are supported, including images, videos, MP3s, GIFs, PDFs, and more.

[Learn more about image management](https://prismic.io/docs/guides/manage-images.md)

Prismic provides components for [Next.js](https://prismic.io/docs/nextjs.md), [Nuxt](https://prismic.io/docs/nuxt.md), and [SvelteKit](https://prismic.io/docs/sveltekit.md) to display links to media.

**Next.js example:**

```tsx
import { PrismicNextLink } from "@prismicio/next";

<PrismicNextLink field={slice.primary.my_link_to_media_field} />;
```

**Nuxt example:**

```vue-html
<PrismicLink :field="slice.primary.my_link_to_media_field" />
```

**SvelteKit example:**

```svelte
<script lang="ts">
  import { PrismicLink } from "@prismicio/svelte";
</script>

<PrismicLink field={slice.primary.my_link_to_media_field} />
```

# Add a link to media field to a content model

1. **Open Slice Machine**

   In your Prismic project, start Slice Machine to begin editing content models.

   ```sh
   npx start-slicemachine --open
   ```

2. **Add a link to media field**

   In Slice Machine, navigate to the slice, page type, or custom type you want to modify. Add a **link to media** field.

   The **label** determines the label shown to content writers in the [Page Builder](https://prismic.io/docs/guides/page-builder.md). Use an easily understood name.

   The **API ID** determines the property name in the Content API. Use a short, snake-cased name.

3. **(Optional) Allow display text**

   Links may need a text label, such as "Download file" or "View full size." Content writers can provide a label when display text is allowed.

   Open the field settings and check the **Allow display text** setting.

4. **(Optional) Allow variants**

   Links may need a specific visual style, like "Primary" or "Secondary" styling. Content writers can select from a list of styles you set when variants are enabled.

   Open the field settings and enable variants under the **Variants** settings. Add as many variant options as needed.

# Display links to media

Prismic provides link components for Next.js, Nuxt, and SvelteKit.

**Next.js example:**

```tsx
import { PrismicNextLink } from "@prismicio/next";

<PrismicNextLink field={slice.primary.my_link_to_media_field} />;
```

See the [`<PrismicNextLink>` documentation](https://prismic.io/docs/technical-reference/prismicio-next/v2.md#prismicnextlink) to learn more.

**Nuxt example:**

```vue-html
<PrismicLink :field="slice.primary.my_link_to_media_field" />
```

See the [`<PrismicLink>` documentation](https://prismic.io/docs/technical-reference/prismicio-vue/v4.md#prismiclink) to learn more.

**SvelteKit example:**

```svelte
<script lang="ts">
  import { PrismicLink } from "@prismicio/svelte";
</script>

<PrismicLink field={slice.primary.my_link_to_media_field} />
```

See the [`<PrismicLink>` documentation](https://prismic.io/docs/technical-reference/prismicio-svelte/v2.md#prismiclink) to learn more.

# Use variants to style links

[Link variants](#optional-allow-variants) can determine how links are styled. This example adds a CSS class based on the selected variant.

**Next.js example:**

```tsx
<PrismicNextLink
  field={slice.primary.related_media}
  className={clsx("button", {
    primary: slice.primary.related_media.variant === "Primary",
    secondary: slice.primary.related_media.variant === "Secondary",
  })}
/>
```

This example uses [`clsx`](https://www.npmjs.com/package/clsx) to conditionally apply class names.

**Nuxt example:**

```vue-html
<PrismicLink
  :field="slice.primary.related_media"
  class="button"
  :class="{
    primary: slice.primary.related_media.variant === 'Primary',
    secondary: slice.primary.related_media.variant === 'Secondary',
  }"
/>
```

This example uses Vue's [`:class`](https://vuejs.org/guide/essentials/class-and-style) directive to conditionally apply class names.

**SvelteKit example:**

```svelte
<PrismicLink
  field={slice.primary.related_media}
  class={[
    "button",
    {
      primary: slice.primary.related_media.variant === "Primary",
      secondary: slice.primary.related_media.variant === "Secondary",
    },
  ]}
/>
```

This example uses Svelte's [`class`](https://svelte.dev/docs/svelte/class) attribute to conditionally apply class names.

# Check if a link to media field has a value

Use `isFilled.linkToMedia()` from [`@prismicio/client`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md) to check if a link to media field has a value.

```ts
import { isFilled } from "@prismicio/client";

if (isFilled.linkToMedia(slice.primary.related_media)) {
  // Do something if `related_media` has a value.
}
```

[Learn more about `isFilled`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#isfilled)

# API response

Here is what a link to media field looks like from the Content API:

```json
{
  "example_link_to_media": {
    "link_type": "Media",
    "id": "ZfA3AYUHT9oC73Ba",
    "name": "mona-lisa",
    "kind": "image",
    "url": "https://images.prismic.io/example-prismic-repo/mona-lisa?auto=compress,format",
    "size": "50",
    "height": "500",
    "width": "800"
  }
}
```

When display text or variants are allowed, their values are set on the `text` and `variant` properties.

```json {11-12}
{
  "example_link_to_media": {
    "link_type": "Media",
    "id": "ZfA3AYUHT9oC73Ba",
    "name": "mona-lisa",
    "kind": "image",
    "url": "https://images.prismic.io/example-prismic-repo/mona-lisa?auto=compress,format",
    "size": "50",
    "height": "500",
    "width": "800",
    "text": "Click here to see image",
    "variant": "Primary"
  }
}
```