uni-app 安卓12 App真机调试本地图片不显示

uni-app 安卓12 App真机调试本地图片不显示

示例代码：

<view class="top-banner" @click="toTest">
<image src="/static/oil/top-banner.png"></image>
</view>
```

### 操作步骤：

<view class=“top-banner” @click=“toTest”> <image src="/static/oil/top-banner.png"></image> </view> 项目内静态资源


### 预期结果：

显示图片


### 实际结果：

没有显示


### bug描述：

安卓12App真机调试本地图片不显示


| 信息类别     | 信息内容       |
|--------------|----------------|
| 产品分类     | uniapp/App     |
| PC开发环境   | Mac            |
| PC系统版本   | 11.4 m12020    |
| HBuilderX类型| 正式           |
| HBuilderX版本| 3.2.12         |
| 手机系统     | Android        |
| 手机系统版本 | Android 12     |
| 手机厂商     | 三星           |
| 手机机型     | s21            |
| 页面类型     | vue            |
| vue版本      | vue2           |
| 打包方式     | 云端           |
| 项目创建方式 | HBuilderX      |

更多关于uni-app 安卓12 App真机调试本地图片不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

这个示例代码是什么？

更多关于uni-app 安卓12 App真机调试本地图片不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题通常与Android 12的文件权限策略有关。以下是几个关键排查点：

  1. 静态资源路径检查：确保图片实际存放在/static/oil/top-banner.png路径下，且文件名大小写与代码完全一致。

  2. Android存储权限：在Android 12上，需要在manifest.json中配置以下权限：

{
  "app-plus": {
    "distribute": {
      "android": {
        "permissions": [
          "<uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>",
          "<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>"
        ]
      }
    }
  }
}
  1. 使用相对路径或base64：尝试改用相对路径：
<image src="./static/oil/top-banner.png"></image>
回到顶部