# 媒体过滤器

媒体过滤器使您能够渲染与各种店铺资源（例如[商品](/zh-CN/docs/theme/references/liquid/objects/product)和[collection](/zh-CN/docs/theme/references/liquid/filters/collection)）关联的媒体。

## img\_url

`variable | img_url`

returns  [string](../basics/liquid-types#string)

返回图片的 CDN URL。

**代码**

```liquid
{{ product.image | img_url }}
```

**输出**

```text
//cdn.shoplazza.com/1af35e88f4be62831cdfbbbe86704824.jpeg
```

`img_url` 接受 [image object](/zh-CN/docs/theme/references/liquid/objects/image)、图片 `src` 字符串，或 [`file_reference` 类型 metafield](/zh-CN/docs/theme/references/liquid/objects/metafield#%E8%AE%BF%E9%97%AE%E5%AF%B9%E8%B1%A1%E7%B1%BB%E5%9E%8B%E7%9A%84-metafields) 的 `value`：

**代码**

```liquid
{{ product.image.src | img_url: '400x' }}

{{ product.metafields.custom.spec_file.value | img_url: '400x' }}
```

### size

`variable | img_url: string`

returns  [string](../basics/liquid-types#string)

size 参数允许您指定图片的尺寸，最大可达 5760 x 5760 px。您可以只指定宽度、只指定高度或同时指定两者，也可以使用以下命名尺寸：

| Name | Dimensions |
| --- | --- |
| `pico` | `16x16 px` |
| `icon` | `32x32 px` |
| `thumb` | `50x50 px` |
| `small` | `100x100 px` |
| `compact` | `160x160 px` |
| `medium` | `240x240 px` |
| `large` | `480x480 px` |
| `grande` | `600x600 px` |
| `original` | `1024x1024 px` |

**代码**

```liquid
{{ product.image | img_url: 'x200' }}

{{ product.image | img_url: '200x' }}

{{ product.image | img_url: '200x200' }}

{{ product.image | img_url: 'medium' }}
```

**输出**

```text
//cdn.shoplazza.com/1af35e88f4be62831cdfbbbe86704824_x200.jpeg

//cdn.shoplazza.com/1af35e88f4be62831cdfbbbe86704824_200x.jpeg

//cdn.shoplazza.com/1af35e88f4be62831cdfbbbe86704824_200x200.jpeg

//cdn.shoplazza.com/1af35e88f4be62831cdfbbbe86704824_240x240.jpeg
```

### scale

`variable | img_url: string, scale: number`

returns  [string](../basics/liquid-types#string)

指定图片的像素密度。有效的密度值大于 1。

**代码**

```liquid
{{ product.image | img_url: '200x', scale: 2 }}
```

**输出**

```text
//img.staticdj.com/1af35e88f4be62831cdfbbbe86704824_400x.jpeg
```

## media\_parse

`string | media_parse`

returns  [media object](./media)

返回使用 `media_parse` filter 解析 URL 查询参数的 [media object](/zh-CN/docs/theme/references/liquid/filters/media)。

**代码**

```liquid
{% assign media = product.image.src | media_parse %}

{{ media.media_type }}

{{ media.sources }}
```

**数据**

```json
{
  "product": {
    "image": {
      "src": "//cdn.shoplazza.com/2fc412cf6d4aa67eb560b615aea972a21686877786133.png?media_type=model3d&sources=https:\/\/model3d.shoplazza.com\/558f35716f6af953f9bb5d75f6d77e6a1686877787287.glb"
    }
  }
}
```

**输出**

```text
model3d

//model3d.shoplazza.com/558f35716f6af953f9bb5d75f6d77e6a1686877787287.glb
```

### 预览图片

对于给定媒体，默认会生成预览图片，您可以将其用作海报图片。

**代码**

```liquid
{% assign media = product.image.src | media_parse %}

{{ media.preview_image }}
```

**数据**

```json
{
  "product": {
    "image": {
      "src": "\/\/cdn.shoplazza.com\/2fc412cf6d4aa67eb560b615aea972a21686877786133.png?media_type=model3d&sources=https:\/\/model3d.shoplazza.com\/558f35716f6af953f9bb5d75f6d77e6a1686877787287.glb"
    }
  }
}
```

**输出**

```text
//cdn.shoplazza.com/2fc412cf6d4aa67eb560b615aea972a21686877786133.png
```