uniapp 打包后本地资源图片不显示是什么原因

在 UniApp 打包后，本地资源图片不显示通常由以下原因导致，请逐一排查：

1. 路径问题

• 静态资源路径错误：打包后路径可能发生变化，确保使用相对路径（如 ./images/photo.png）或绝对路径（如 /static/images/photo.png）。
• 平台差异：H5 平台可能需用 @/ 或 / 开头，小程序端需将图片放在 static 目录下。

2. 未正确放置静态资源

• 图片必须放在 static 目录（根目录下），此目录内容会直接拷贝到输出包中，不经过编译。
• 错误示例：将图片放在 assets 目录，该目录适用于需编译处理的文件（如样式中的背景图）。

3. 图片格式或大小问题

• 检查图片格式是否被支持（如 PNG、JPG），避免使用冷门格式。
• 图片过大可能导致加载失败，可尝试压缩图片。

4. 打包配置问题

• 在 manifest.json 中检查是否配置了正确的路径或资源规则。
• 示例配置（H5平台）：

  {
    "h5": {
      "publicPath": "./"
    }
  }
  

5. 平台特定限制

• 小程序平台：部分网络图片需配置域名白名单，但本地图片通常不受影响。
• App 平台：确保图片路径正确，且无权限问题。

6. 缓存或构建问题

• 清除构建缓存：删除 unpackage 目录，重新运行 npm run build 或通过 HBuilderX 重新打包。
• 开发工具问题：重启 HBuilderX 或检查 IDE 设置。

解决方案步骤：

1. 检查路径：确认图片在 static 目录，代码中引用路径为 /static/image.png。
2. 验证格式：确保图片未损坏且格式兼容。
3. 重新打包：清理缓存后重新构建项目。
4. 平台测试：在不同平台（H5、小程序、App）分别测试，定位具体平台问题。

通过以上步骤，通常能解决大部分图片不显示的问题。