Remotion(ReactJS)项目中图片及CSS无法渲染问题求助

1. Fix the Missing File Extension in staticFile #

The most obvious issue here is that you omitted the .jpg extension when calling staticFile. Remotion needs the full filename to locate assets in the public folder.

Corrected line in Artist_pic_1:

src={staticFile("Marcus_Miller_The_Renaissance_Tour.jpg")}

2. Double-Check Filename & Folder Structure #

• Ensure the image filename in public exactly matches what you pass to staticFile—pay attention to capitalization (e.g., Marcus vs marcus) and typos, since some operating systems (Linux/macOS) are case-sensitive.
• Confirm your public folder is at the project root (same level as package.json), not nested inside src.

3. Confirm Component Rendering Timing #

Your Artist_pic_1 is wrapped in a <Sequence from={50} />, so it only appears starting at frame 50. Make sure you're scrubbing past frame 50 in the Remotion preview window to see the image.

4. Restart the Remotion Dev Server #

Remotion caches assets during development. If you added the image after starting the server, restart it to load the new asset properly.

5. CSS Troubleshooting #

If you're having issues with CSS:

• For inline styles (like your image positioning), ensure the CSS properties are valid (your current inline styles look correct, but double-check values like top/right).
• If using external CSS files, import them directly into your component (e.g., import "./styles.css"). Remotion supports CSS modules and styled-components if you prefer those approaches.

内容的提问来源于stack exchange，提问作者Houston Mhlongo