# How to download images

This guide will take you through how to work with images and other media embedded in expressions in Laws.Africa’s Content API. After reading this guide you will know:

* how to list all the images and media included with an expression
* how to download and save images and other media from the Content API
* how to ensure that images are loaded correctly in your HTML content

## What are embedded images?

Some legislation includes embedded images. You will need to download and store these images to ensure they are displayed when you show the legislation to your users.

{% hint style="info" %}
You must download these images to include them in your HTML. The images will not be shown from the Laws.Africa servers.
{% endhint %}

## Including images in your application or website

There are two steps to include embedded images in the legislation used in your app or website.

1. Download the images from the Laws.Africa Content API and save them to your server or app.
2. Ensure the HTML you fetch from the Laws.Africa Content API references the images correctly.

We'll go through each of these steps below.

## How to list images using the Content API

The Laws.Africa Content API makes it easy to list and download embedded images for a particular work. Fetch the list of images using the `/frbr-uri/media.json` URL for the work. You can find this URL in the work's `links` array:

```javascript
"links": [
  {
    "mediaType": "application/json",
    "href": "https://api.laws.africa/v2/akn/za-jhb/act/by-law/2004/public-road-electronic-communications-networks-and-miscellaneous/eng/media.json",
    "title": "Media",
    "rel": "media"
  },
]
```

For example, here is the API call to list the images embedded with Johannesburg's [Public Road and Miscellaneous By-laws by-law](https://openbylaws.org.za/za-jhb/act/by-law/2004/public-road-electronic-communications-networks-and-miscellaneous/eng/):

```bash
$ curl -H "Authorization: Token <YOUR_AUTH_TOKEN>" \
  https://api.laws.africa/v2/akn/za-jhb/act/by-law/2004/public-road-electronic-communications-networks-and-miscellaneous/media.json
```

```javascript
{
  "count": 10,
  "next": null,
  "previous": null,
  "results": [
    {
      "url": "https://api.laws.africa/v2/akn/za-jhb/act/by-law/2004/public-road-electronic-communications-networks-and-miscellaneous/eng@2011-08-10/media/certificate.png",
      "filename": "certificate.png",
      "mime_type": "image/png",
      "size": 253224
    },
    {
      "url": "https://api.laws.africa/v2/akn/za-jhb/act/by-law/2004/public-road-electronic-communications-networks-and-miscellaneous/eng@2011-08-10/media/indemnity.png",
      "filename": "indemnity.png",
      "mime_type": "image/png",
      "size": 210645
    },
  ]
}
```

Each item in the list describes a single image or media type and includes the filename, [mime type](https://en.wikipedia.org/wiki/Media_type), filesize in bytes, and the URL to use to download the file.

## Downloading and saving images

In order for the embedded images to show up when your users view the content you have fetched from the Laws.Africa API, you must first download and store the images locally.

{% hint style="info" %}
You must save the images in a folder called `media`, next to your legislation HTML file. The `<img>` tags in the HTML will try to load the images from this path.
{% endhint %}

For example, suppose you have downloaded the English HTML content of the 2011-08-10 point in time for the by-law and saved it as:

* `public-road-electronic-communications-networks-and-miscellaneous/eng/2011-08-10/index.html`

Then you should download and save the media files to `media` folder in the same directory:

* `public-road-electronic-communications-networks-and-miscellaneous/eng/2011-08-10/media/`

This ensures that you'll keep the different images for different works, languages and points in time separate.

{% hint style="info" %}
You must save the images separately for each separate point in time and language that you download.
{% endhint %}

## Controlling where images are loaded from

By default, HTML from Laws.Africa will try to load images from the `media` directory relative to the current URL, using an image tag such as `<img src="media/wayleave-application.png">`.

If you need to load images from a different location you can tell Laws.Africa to use apply a prefix to the `src` attribute of image tags by using the `?media-url` query parameter.

For example, using `?media-url=/static/assets/za/act/1995/2/eng/2018-11-10/` will produce image tags such as `<img src="/static/assets/za/act/1995/2/eng/2018-11-10/media/wayleave-application.png">`.

{% hint style="info" %}
You should encode the FRBR URI into the `media-url` parameter to ensure that you show images for the correct work, point in time and language.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.laws.africa/how-to-guides/how-to-download-images.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.