Animation with images is not working

[Nojugames]

If there is an animation that uses images then the images don't load. The SVG animations still work but the images from the /images folder just don't show up.

[bagada]

i solved this adding each image a require word like this (in my animation.json)

"assets": [{ "id": "image_0", "w": 72, "h": 117, "u": "images/", "p": 'img_0.png', "e": 0 }, { "id": "image_1", "w": 57, "h": 69, "u": "images/", "p": 'img_1.png', "e": 0 }, {

To

"assets": [{ "id": "image_0", "w": 72, "h": 117, "u": "", "p": require('@/assets/animation/images/img_0.png'), "e": 0 }, { "id": "image_1", "w": 57, "h": 69, "u": "", "p": require('@/assets/animation/images/img_1.png'), "e": 0 }, {

[dreamstyle]

If you're using Vue CLI 3, you should put your image folder in public instead of src. It works for me.

[MrMarik]

i solved this adding each image a require word like this (in my animation.json)

"assets": [{ "id": "image_0", "w": 72, "h": 117, "u": "images/", "p": 'img_0.png', "e": 0 }, { "id": "image_1", "w": 57, "h": 69, "u": "images/", "p": 'img_1.png', "e": 0 }, {

To

"assets": [{ "id": "image_0", "w": 72, "h": 117, "u": "", "p": require('@/assets/animation/images/img_0.png'), "e": 0 }, { "id": "image_1", "w": 57, "h": 69, "u": "", "p": require('@/assets/animation/images/img_1.png'), "e": 0 }, {

i got a JSON paser faild error when write as yours

[dankotov]

I solved this by tweaking the Bodymovin settings inside After Effects. Under your composition settings in Bodymovin extension you can navigate to Assets settings and choose "Include in json".

This will provide the json file not a path to your image but an actual code of it.

Sorry for such a late answer, just stumbled across Bodymovin and this issue. Hope it helps though :)

[tobiasfamos]

I am having the same problem. Neither including the assets in the JSON, nor putting the images folder in the public folder worked. Any ideas?

[edgonzalez24]

Hi guys! I had this same issue but I could fix it, transform the JSON file to a JS file using an export const, and set values in assets "p" (path) key using required function. Example:

// Lottie Files (JS)
export const animationData = {
  "v": "5.7.4",
  "fr": 25,
  "ip": 0,
  "op": 140,
  "w": 385,
  "h": 394,
  "nm": "loading",
  "ddd": 0,
  "assets": [
    {
      "id": "image_0",
      "w": 79,
      "h": 84,
      "u": "",
      "p": require('./images/img_0.png'), // I used require to find assets
      "e": 0
    }
   ]
}

 //(Component)
 import { animationData } from '@/assets/file-lottie'

<lottie
   class="lottie"
   :options="{animationData}"
   v-on:animCreated="handleAnimation"
 />