image.md 2.3 KB
Newer Older
D
DCloud_LXH 已提交
1 2 3 4 5 6 7 8 9
## image

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

<!-- UTSCOMJSON.image.attrubute -->

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

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

app端支持的图片格式如下:
D
DCloud_LXH 已提交
13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
- [x] bmp
- [x] gif
- [x] ico
- [x] jpg
- [x] png
- [x] webp
- [x] heic(Android10+支持)

如需其他图片格式,可自行开发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目录下。
	
	其他目录的图片由于不会被打包进去,所以无法访问。
	
	本地路径的大小写,在真机运行时由于运行在sd卡上所以不敏感,但在打包后整合到apk中由于Android系统的要求是大小写敏感的。

- 本地绝对路径file:///方式
	
	形如`file:///storage/emulated/0/Android/data/io.dcloud.uniappx/apps/__UNI__4517034/www/static/test-image/logo.png`
	
	访问本应用内的资源时无需使用本方式,推荐使用/static方式。上述地址受包名、appid影响。
	
	file:///方式一般用于download等公共目录。使用前需确保拥有相关权限。

- 支持网络路径
	
	支持http、https。
	
	image组件内部使用facebook的[fresco](https://github.com/facebook/fresco)库(2.5.0),自带缓存策略,也会自动清理缓存。

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

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

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

D
DCloud_LXH 已提交
56 57 58 59 60 61 62
<!-- UTSCOMJSON.image.children -->

<!-- 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到最终的包中,导致无法访问。