如何替换Adobe After Effects导出的Lottie JSON文件中的单张图片？

Hey there! Let me walk you through exactly how to update that image entry in your Lottie JSON file—super straightforward once you break it down.

Step 1: Locate & Edit the Assets Entry #

First, open your Lottie JSON file in any text editor (VS Code, Sublime, even Notepad works). Scroll to the "assets": [] array—you’ll see the entry you referenced:

"assets": [ 
  { 
    "id": "image_0", 
    "w": 960, 
    "h": 540, 
    "u": "images/", 
    "p": "img_0.png" 
  } 
]

Step 2: Adjust the Fields for Your New Image #

Here’s what each field does and how to tweak them:

• id: This is the unique label the animation uses to reference the image. You can keep it as "image_0" (no need to change it unless you have multiple assets) or rename it to something descriptive like "hero_banner"—just make sure it doesn’t clash with other asset IDs in the array.
• w & h: These are the pixel dimensions of your new image. Critical: Match these values exactly to your image’s width and height. If your new image is 1280x720, update them to "w": 1280, "h": 720—mismatched sizes will cause stretching or cropping.
• u: This is the relative path from your JSON file to your image folder. If your new image stays in assets/images/, keep "u": "images/". If you moved it to a new folder like assets/backgrounds/, change this to "u": "backgrounds/".
• p: This is your new image’s filename. Replace "img_0.png" with your file’s exact name (including the extension, like "new_bg.jpg"—note that capitalization matters on some systems!).

Example Updated Entry #

If your new image is animation_hero.png, 1920x1080, and lives in the same images/ folder, your entry would look like:

"assets": [ 
  { 
    "id": "image_0", 
    "w": 1920, 
    "h": 1080, 
    "u": "images/", 
    "p": "animation_hero.png" 
  } 
]

Step 3: Place the New Image Correctly #

Save your new image in the folder specified by the u field. For the example above, that’s assets/images/—make sure the folder structure matches the path you set.

Step 4: Test Your Animation #

Save the modified JSON file, then load your Lottie animation as usual. If the new image doesn’t show up, double-check:

• The filename in p is 100% accurate (no typos, correct capitalization)
• The path in u is relative to where your JSON file is stored
• The w and h values match your image’s actual dimensions

内容的提问来源于stack exchange，提问作者Nour abo elsoud