## Resource: Work with Wix Media

## Article: Work With Wix Media

## Article Link: https://dev.wix.com/docs/sdk/articles/work-with-the-sdk/work-with-wix-media.md

## Article Content:

# Working with Wix Media

The [SDK Media API](https://dev.wix.com/docs/sdk/core-modules/sdk/media.md) contains functionality for working with Wix Media resources.

> **Note:** This API is not intended for use in [site development](https://dev.wix.com/docs/sdk/articles/get-started/about-site-development.md) or when [coding in Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/code-in-blocks/about-coding-in-blocks.md).

## Overview

The [SDK Media API](https://dev.wix.com/docs/sdk/core-modules/sdk/media.md) enables you to get absolute URLs for Wix Media resources, including scaled and cropped images.

With the [SDK Media API](https://dev.wix.com/docs/sdk/core-modules/sdk/media.md), you can:

- Get an absolute URL for a Wix Media resource.
- Scale a Wix Media image to fit specified dimensions.
- Scale a Wix Media image to fill specified dimensions.
- Crop a Wix Media image.

Wix APIs identify Wix Media resources using internal identifiers with the following structure:

```url
wix:image://v1/<uri>/<filename>#originWidth=<width>&originHeight=<height>[&watermark=<watermark_manifest_string>]
```

For example, a product or cart item object may refer to its associated image with an identifier such as `"wix:image://v1/3c76e2_c5331f937348492a97df87b..."`.

You can use the SDK Media API to obtain an absolute URL for such an image, so you can access and manipulate it in your own code. You can obtain a URL for the original image, or for a scaled or cropped version of the image.

## Usage

The [SDK Media API](https://dev.wix.com/docs/sdk/core-modules/sdk/media.md) module is included in the `@wix/sdk` package. To use it, install the package and then import `{ media }` from the `@wix/sdk` package in your code.

```js
import { media } from "@wix/sdk";
```

You can then call one of the media functions with a `wix:image://` identifier to obtain a URL for the image.

```js
const { url } = media.getImageUrl(wixImageId);
```

## Methods

The SDK Media API includes the following methods:

- [**`getImageUrl()`**](https://dev.wix.com/docs/sdk/core-modules/sdk/media.md#getimageurl): Gets an absolute URL for a specified Wix Media image, along with the image's height and width in pixels, and its ID.
- [**`getScaledToFitImageUrl()`**](https://dev.wix.com/docs/sdk/core-modules/sdk/media.md#getscaledtofitimageurl): Gets an absolute URL for a scaled version of a specified Wix Media image to fit within the provided width and height while retaining the image's original proportions.
- [**`getScaledToFillImageUrl()`**](https://dev.wix.com/docs/sdk/core-modules/sdk/media.md#getscaledtofillimageurl): Gets an absolute URL for a scaled version of a specified Wix Media image to fill the provided width and height while retaining the image's original proportions.
- [**`getCroppedImageUrl()`**](https://dev.wix.com/docs/sdk/core-modules/sdk/media.md#getcroppedimageurl): Gets an absolute URL for a cropped version of a specified Wix Media image based on the coordinates provided.

## Example

This example shows how to use `getImageUrl()` to obtain an absolute URL from the Wix Media identifier for an image provided by the `getCurrentCart()` function.

```javascript
import { media } from "@wix/sdk";
import { currentCart } from "@wix/ecom";

const { cart } = await currentCart.getCurrentCart();

const { url } = media.getImageUrl(cart.lineItems[0].image);
```