How to Embed Images in a Data Grid in Under 60 Seconds
Tags: javascript, html, tutorial, webdev
Published: 2019-07-23 17:58:47

---
title: How to Embed Images in a Data Grid in Under 60 Seconds
published: true
description: Learn how to embed images in a JavaScript data grid in under a minute using ZingGrid. Watch the video or read the tutorial to get started. 
tags: javascript, html, tutorial, webdev
cover_image: https://firebasestorage.googleapis.com/v0/b/zinggrid-marketing.appspot.com/o/blogging%2Fzinggrid-image-embeds-stopwatch.jpg?alt=media&token=e12adb1e-bf64-4e1a-a37b-334234195b2f
---

Welcome to my “ZingGrid Functionality in Under 60 Seconds” blog series. These walkthroughs are meant to highlight how easy it is to add interactivity and functionality to [ZingGrid data grids and tables](https://www.zinggrid.com/).

Watch the short video below to see how easy it is to add images to ZingGrid data grids, or scroll further to read a short summary covering the basics.

{% youtube yHvgZE73K3s %}

The first thing you’ll want to do is follow this checklist to make sure you’ve set up ZingGrid properly in preparation for implementing this feature. Check out [this post](https://dev.to/zinggrid/creating-your-first-data-grid-with-zinggrid-2288) if you'd like to learn more about creating your first data grid with ZingGrid.

1. Make sure the images you want to embed are already hosted online, and that you have permission to use them.
2. Update your JSON dataset to include the URLs to the images you'd like to embed.
3. Make sure you've set up a basic grid by referencing the ZingGrid library in your development environment using either the CDN or self-hosted options

As a quick refresher, if you're using ZingGrid in a basic HTML page, this is what your code should look like before starting this tutorial:

```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
    </head>
    <body>
        <zing-grid></zing-grid>
    </body>
</html>
```

From here, it's just a matter of adding your data to your grid, and adding columns so you can specify the column type for your embedded images.

---

## Embedding Images in Under a Minute
Let's say you have a simple dataset about the planets in our solar system. This dataset will yield three columns of data when rendered in ZingGrid, the last of which contains images. Your JSON dataset might look something like this:

```
[ 
    {
        "planet": "Mercury",
        "moons": "0",
        "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fmercury-200px.jpg?alt=media&token=23f8d355-ca73-4334-980c-23f5ae91d087"
    },
    {
        "planet": "Venus",
        "moons": "0",
        "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fvenus-200px.jpg?alt=media&token=1f6119d6-414d-4f1e-906d-514d7f5a295f"
    },
    {
        "planet": "Earth",
        "moons": "1",
        "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fearth-200px.jpg?alt=media&token=33df1022-e000-4e95-9996-5b9101af627d"
    },
    {
        "planet": "Mars",
        "moons": "2",
        "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fmars-200px.jpg?alt=media&token=ff1209b7-ef9d-496d-8a93-ef1cd8fad794"
    },
    {
        "planet": "Jupiter",
        "moons": "67",
        "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fjupiter-200px.jpg?alt=media&token=64c3cf9b-5541-475b-9711-17f046cff801"
    },
    {
        "planet": "Saturn",
        "moons": "62",
        "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fsaturn-200px.jpg?alt=media&token=e4af20df-8319-4644-8361-e3f5b9a75d9f"
    },
    {
        "planet": "Uranus",
        "moons": "27",
        "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Furanus-200px.jpg?alt=media&token=a9e99164-7417-4a05-80eb-421c3867e9c5"
    },
    {
        "planet": "Neptune",
        "moons": "13",
        "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fneptune-200px.jpg?alt=media&token=29d86d30-995c-45eb-ab96-1b99b7b1535c"
    },
    {
        "planet": "Pluto",
        "moons": "4",
        "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fpluto-200px.jpg?alt=media&token=b7cbb041-df9b-48f8-b9ab-4f0f12df4efd"
    }
]
```

This is what your code would look like if you were to add this data inline to your  grid:

```
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
    </head>
    <body>
        <zing-grid
        data='[ 
            {
            "planet": "Mercury",
            "moons": "0",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fmercury-200px.jpg?alt=media&token=23f8d355-ca73-4334-980c-23f5ae91d087"
            },
            {
            "planet": "Venus",
            "moons": "0",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fvenus-200px.jpg?alt=media&token=1f6119d6-414d-4f1e-906d-514d7f5a295f"
            },
            {
            "planet": "Earth",
            "moons": "1",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fearth-200px.jpg?alt=media&token=33df1022-e000-4e95-9996-5b9101af627d"
            },
            {
            "planet": "Mars",
            "moons": "2",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fmars-200px.jpg?alt=media&token=ff1209b7-ef9d-496d-8a93-ef1cd8fad794"
            },
            {
            "planet": "Jupiter",
            "moons": "67",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fjupiter-200px.jpg?alt=media&token=64c3cf9b-5541-475b-9711-17f046cff801"
            },
            {
            "planet": "Saturn",
            "moons": "62",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fsaturn-200px.jpg?alt=media&token=e4af20df-8319-4644-8361-e3f5b9a75d9f"
            },
            {
            "planet": "Uranus",
            "moons": "27",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Furanus-200px.jpg?alt=media&token=a9e99164-7417-4a05-80eb-421c3867e9c5"
            },
            {
            "planet": "Neptune",
            "moons": "13",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fneptune-200px.jpg?alt=media&token=29d86d30-995c-45eb-ab96-1b99b7b1535c"
            },
            {
            "planet": "Pluto",
            "moons": "4",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fpluto-200px.jpg?alt=media&token=b7cbb041-df9b-48f8-b9ab-4f0f12df4efd"
            }
        ]'>
        </zing-grid>
    </body>
</html>
```

At this point, your grid should look something like this when rendered – but don't worry, it's not a mistake:

![Data grid rendering URL strings instead of image embeds](https://thepracticaldev.s3.amazonaws.com/i/cly3v3hwh5egtexf6qto.png)

This is where the magic happens! To render the third column in your dataset as an image instead of a string containing an image path, you'll need to manually specify the columns in your grid so you can change the third column's column type. 

To do this, add three `zg-column` tags inside `<zing-grid></zing-grid>` – one for each unique key in your JSON data. In our case, our sample dataset has three unique JSON keys, so we'll add three `<zg-column></zg-column>` tags inside the `<zing-grid></zing-grid>` tag. 

Within each set of `<zg-column></zg-column>` tags, we'll add `index=""` and fill in each JSON key name in the order we'd like the columns to appear. In the `zg-column` tag for `photo`, we'll add the `type=""` attribute with a value of `image` to specify that the column should render images instead of strings of text. 

If you're using the sample data from this tutorial, your column tags should look like this:

```
<zg-colgroup>
    <zg-column index="planet"></zg-column>
    <zg-column index="moons"></zg-column>
    <zg-column index="photo" type="image"></zg-column>
</zg-colgroup>
```

You don't need to specify the column type for the `planet` and `moons` columns because ZingGrid's default column type is `text`.

If you're following along, your code should look like this (focus on the code below the inline data):

```
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
    </head>
    <body>
        <zing-grid
        data='[ 
            {
            "planet": "Mercury",
            "moons": "0",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fmercury-200px.jpg?alt=media&token=23f8d355-ca73-4334-980c-23f5ae91d087"
            },
            {
            "planet": "Venus",
            "moons": "0",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fvenus-200px.jpg?alt=media&token=1f6119d6-414d-4f1e-906d-514d7f5a295f"
            },
            {
            "planet": "Earth",
            "moons": "1",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fearth-200px.jpg?alt=media&token=33df1022-e000-4e95-9996-5b9101af627d"
            },
            {
            "planet": "Mars",
            "moons": "2",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fmars-200px.jpg?alt=media&token=ff1209b7-ef9d-496d-8a93-ef1cd8fad794"
            },
            {
            "planet": "Jupiter",
            "moons": "67",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fjupiter-200px.jpg?alt=media&token=64c3cf9b-5541-475b-9711-17f046cff801"
            },
            {
            "planet": "Saturn",
            "moons": "62",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fsaturn-200px.jpg?alt=media&token=e4af20df-8319-4644-8361-e3f5b9a75d9f"
            },
            {
            "planet": "Uranus",
            "moons": "27",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Furanus-200px.jpg?alt=media&token=a9e99164-7417-4a05-80eb-421c3867e9c5"
            },
            {
            "planet": "Neptune",
            "moons": "13",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fneptune-200px.jpg?alt=media&token=29d86d30-995c-45eb-ab96-1b99b7b1535c"
            },
            {
            "planet": "Pluto",
            "moons": "4",
            "photo": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/planets-demo%2Fpluto-200px.jpg?alt=media&token=b7cbb041-df9b-48f8-b9ab-4f0f12df4efd"
            }
        ]'>
            <zg-colgroup>
                <zg-column index="planet"></zg-column>
                <zg-column index="moons"></zg-column>
                <zg-column index="photo" type="image"></zg-column>
            </zg-colgroup>
        </zing-grid>
    </body>
</html>
```

And that's all you need to do to render images in your ZingGrid data grid! The above code will yield the following result:

![Data grid rendering image embeds](https://thepracticaldev.s3.amazonaws.com/i/qj4mo2l8kddt8wefwwiv.gif)

Those are the basics of adding image embeds in your ZingGrid data tables & grids. [View the live demo](https://app.zingsoft.com/demos/create/P06UH5EQ) in our Studio playground to see how it works, and so you can play around with the final result.