I have to add a json file, which is a gif, as a picture in a HTML file, so it can display on the page.

I tried:

    <img src="myFile.json"/>

But it does not seems to work. I looked online, especially to see if there was any Lottie json insertion tutorial, but nothing quite helpful. I also tried to convert the json as gif, but the file is too big so it was not a good idea.

Any help would be appreciated :)

I have to add a json file, which is a gif, as a picture in a HTML file, so it can display on the page.

I tried:

    <img src="myFile.json"/>

But it does not seems to work. I looked online, especially to see if there was any Lottie json insertion tutorial, but nothing quite helpful. I also tried to convert the json as gif, but the file is too big so it was not a good idea.

Any help would be appreciated :)

• javascript
• html
• json
• gif
• animated-gif

• JSON is a text format. What do you expect should happen? Are you wanting to make an image of the actual text? May you also share an example of the JSON? Maybe also the image you are hoping to see? – evolutionxbox Commented Feb 25, 2021 at 14:05
• 1 Are you able to share the contents of that JSON file (myFile.json) as it might help us understand what's needed. Browsers won't be able to load JSON directly into an image element as it won't have an image MIME type, but it might be that you want to extract the data in the JSON first, then display it. – Fenton Commented Feb 25, 2021 at 14:19
• You can draw it using a canvas and fillText method. w3schools./graphics/canvas_text.asp – Farzin Kanzi Commented Feb 25, 2021 at 14:26

2 Answers 2

What you are trying is not possible. Lottie files cannot be displayed directly using an <img> tag.

They have a specific embedded web player which you should use when displaying these animations.

In the snippet, you can see the json animation played using the embedded player.

<script src="https://unpkg./@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets9.lottiefiles./datafiles/MUp3wlMDGtoK5FK/data.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop controls autoplay></lottie-player>

You can use a script tag in the body of the html to display the gif. However you first need to modify the json file so it can be read as javascript.

Assign the json data to a variable as you would in javascript:

const gifData = {"a":"123","b":"456"}

Then write the script tag in the body of the html as follows, replacing the src value with your local path:

<script type="text/javascript" src="./data.json"></script>