Lottie文件本地引用报404 Not Found错误无法显示问题咨询

远程Lottie资源可正常加载、本地资源报404，核心原因是浏览器解析出的本地JSON资源请求路径，和服务端实际可访问的文件路径不匹配，不存在Lottie组件本身的配置缺失，从以下几个点逐一排查即可：

1. 先修正路径写法问题 #

• 你当前用的../static/lottie/homeIcon.json是相对路径，解析基准是当前页面的访问URL，不是你本地项目的文件夹层级。举个例子：如果当前页面访问地址是https://你的域名/blog/article1.html，这个相对路径会被解析为https://你的域名/static/lottie/homeIcon.json；如果页面地址是https://你的域名/pages/sub/detail.html，解析出来的路径就会变成https://你的域名/pages/static/lottie/homeIcon.json，层级不对直接就404。
• 优先换成根路径写法：把src属性值改为/static/lottie/homeIcon.json，开头的/代表站点根目录，不管页面在哪个层级，都会从根目录开始找静态资源，不会出现层级解析错误。
• 快速定位路径偏差：打开浏览器控制台「网络(Network)」面板，找到报404的json请求，直接看它的完整请求地址，和你实际存放文件的地址对比，马上就能发现是多拼了层级还是少拼了层级。

2. 检查静态资源托管配置 #

• 如果是用Vite、Webpack、Vue-CLI等前端构建工具开发：要确认静态资源存放目录符合框架要求，比如Vite默认托管public目录下的静态资源，如果你把lottie文件放在public/lottie/homeIcon.json，引用路径直接写/lottie/homeIcon.json即可，构建时资源会自动被打包到输出目录，不要把静态资源放在受构建工具编译的src目录下，不然不会被作为静态文件对外提供访问。
• 如果是用Nginx、Apache或者后端服务部署：确认服务已经给静态资源目录开放了访问权限，没有对.json后缀的请求做拦截、重写规则配置错误的问题。

3. 检查文件本身的匹配问题 #

• 服务器（尤其是Linux系统）对文件名大小写敏感，确认你代码里写的homeIcon.json和实际存的文件名大小写完全一致，不要出现HomeIcon.json、homeicon.json这类拼写偏差。
• 确认文件没有损坏，存放的目录层级和你配置的静态资源目录一致，没有放错文件夹。

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