image.md 2.6 KB
Newer Older
D
DCloud_LXH 已提交
1 2 3 4
## image

<!-- UTSCOMJSON.image.description -->

5
<!-- UTSCOMJSON.image.attribute -->
D
DCloud_LXH 已提交
6 7 8 9

<!-- UTSCOMJSON.image.event -->

### 图片格式
W
wanganxp 已提交
10 11 12
web端支持的图片格式,不同浏览器有差异,可查询caniuse。

app端支持的图片格式如下:
D
DCloud_LXH 已提交
13 14 15 16 17 18
- [x] bmp
- [x] gif
- [x] ico
- [x] jpg
- [x] png
- [x] webp
lizhongyi_'s avatar
lizhongyi_ 已提交
19 20
- [x] heic(iOS支持,Android10+支持)
- [x] tif (iOS端支持,Android端不支持)
D
DCloud_LXH 已提交
21 22 23 24 25 26 27 28 29 30

如需其他图片格式,可自行开发uts组件插件或搜索插件市场,如
- [svg插件](https://ext.dcloud.net.cn/search?q=svg&orderBy=Relevance&cat1=8&cat2=82)
- [apng插件](https://ext.dcloud.net.cn/search?q=apng&orderBy=Relevance&cat1=8&cat2=82)

### src路径支持说明

- 本地路径/static方式

	由于uni-app编译时,只把/static目录下的静态资源copy到app中,所以src均需指向/static目录下。
31

D
DCloud_LXH 已提交
32
	其他目录的图片由于不会被打包进去,所以无法访问。
33

lizhongyi_'s avatar
lizhongyi_ 已提交
34 35
	本地路径的大小写,安卓端在真机运行时由于运行在sd卡上所以不敏感,但在打包后整合到apk中由于Android系统的要求是大小写敏感的。iOS端始终是大小写敏感的。
	
D
DCloud_LXH 已提交
36 37

- 本地绝对路径file:///方式
38

D
DCloud_LXH 已提交
39
	形如`file:///storage/emulated/0/Android/data/io.dcloud.uniappx/apps/__UNI__4517034/www/static/test-image/logo.png`。
40

D
DCloud_LXH 已提交
41
	访问本应用内的资源时无需使用本方式,推荐使用/static方式。上述地址受包名、appid影响。
42

D
DCloud_LXH 已提交
43 44 45
	file:///方式一般用于download等公共目录。使用前需确保拥有相关权限。

- 支持网络路径
46

D
DCloud_LXH 已提交
47
	支持http、https。
48

lizhongyi_'s avatar
lizhongyi_ 已提交
49 50
	安卓端image组件内部使用facebook的[fresco](https://github.com/facebook/fresco)库(2.5.0),自带缓存策略,也会自动清理缓存。
	iOS端image组件内部使用[SDWebImage](https://github.com/SDWebImage/SDWebImage)库(5.10.0),自带缓存策略,默认7天缓存,缓存过期后会自动清理。
D
DCloud_LXH 已提交
51 52 53

<!-- UTSCOMJSON.image.compatibility -->

54 55 56
#### App平台
- App-Android平台由于默认启用了图片缩放(即根据组件实际宽高加载图片,以节省内存),所以可能导致load事件返回的图片尺寸并非图片原始尺寸。

D
DCloud_LXH 已提交
57 58
<!-- UTSCOMJSON.image.children -->

59 60
<!-- UTSCOMJSON.image.example -->

D
DCloud_LXH 已提交
61 62 63 64 65
<!-- UTSCOMJSON.image.reference -->

### tips
- 在error事件里监听报错,并重新设置image组件的src,可实现自定义错误图。[详见示例代码](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/component/image/image-path.uvue)
- 图片文件需在static目录(项目下或uni_modules下都支持static目录)下,或者import导入文件,否则文件不会被copy到最终的包中,导致无法访问。