我可以使用以下代码在electron中显示zip文件中的图像。
指数html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<img src="zip_resources://images.zip/apple.jpg"/>
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</body>
</html>
渲染器。js
protocol.registerBufferProtocol("zip_resources", async (request, callback) => {
const urlExploded = request.url.split("/"); // [ 'zip_resources:', '', 'images.zip', 'apple.jpg' ]
const zip = urlExploded[2]; // images.zip
const fileName = urlExploded[3]; // apple.jpg
const fileContents = await extractFileFromZip(zip, fileName);
callback({ data: fileContents, mimeType: "image" });
});
如你所见,为了让它工作,我创建了一个自定义协议
zip_resources://
并告诉electron如何使用
registerBufferProtocol
.但是如果
img
标签在网络视图中?这样地。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<webview
src="data:text/html,<img src='zip_resources://images.zip/apple.jpg'/>"
/>
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</body>
</html>
如何让webview正确加载此类资源?
