我可以使用以下代码在电子邮件中的zip文件中显示图像。
<!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>
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://
并告诉电子如何使用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正确加载这类资源?