QML开发避坑指南（一）：图像资源的加载

（1）开篇

 图像资源的使用很常见，也是基础。但“少则明，多则惑”。
在QML开发过程中，图像资源的使用场景会多一些，从而导致一些混淆。
 特此笔记，备忘。

（2）图像资源的类型

1. 本地图像，如：本地图像资源（qrc）、本地图像文件
2. 远程图像，如：web服务（网站）、对象存储（http/https）中的图片
3. 内存中的图像，如：QPixmap对象

（3）图像资源的载体

1. QML Image组件
2. QML WebEngineView组件
3. 后端（C++）I/O

（4）图像资源的使用场景

类型	Image	WebEngineView	I/O
本地图像	source : “qrc:///prefix/xxx.png”	<img src=“qrc:///prefix/xxx.png”>	QFile(“:/prefix/xxx.png”) QPixmap(“”:/prefix/xxx.png"")
远程图像	source : “http/https://path/xxx.png” （https需SSL库支持）	<img src=“http/https://path/xxx.png”>	QNetworkAccessManager （https通信需SSL库支持）
内存中的图像	source : “image://imageprovider/id” （imageprovider为自定义ImageProvider的id）	<img src=“urlscheme:///path/xxx.png”> （urlscheme为自定义UrlScheme的名称）	导出：QPixmap::save()
		<img src=“data:image/png;base64,…”>

其中，需注意4点：

1. 路径与url的区分：路径不带scheme，而ulr需要带，例如：
   :/images/cut.png 和 qrc:///images/cut.png。
   注意：不同的scheme后面带多少条反斜杠（/）也有所不同。
2. url scheme的概念：qrc、image、https是常见的scheme（模式？方案？）。
   • qrc（Resource Collection Files）是qt资源系统默认的scheme
   • image用于Image provider
     QWebEngine允许自定义url的scheme。
3. Image provider 机制：是专为QML应用提供的一种图像加载技术（异步加载）。
   参考QQuickImageProvider用法。
4. 自定义URL的scheme，可以理解是QWebEngine组件提供的、拦截并处理自定义的、url的scheme的机制。
   本文中是在QWebEngineView中提供了加载图像的方法（类似QML的image provider机制）。
   参考QWebEngineUrlScheme的用法。

（5）小结

 偶尔因为一些似是而非的理解而浪费时间，所以特此梳理，权作前车之鉴。。

相关文档

1. QML开发避坑指南（二）：加载https图像
2. QML开发避坑指南（三）：webchannel中js的加载顺序
3. QML开发避坑指南（四）：ImageProvider的使用
4. QML开发避坑指南（五）：QML常用类型