如何在电子网页浏览中加载本地zip文件中的图像?

时间:2018-06-15 14:05:09

标签: javascript electron

我可以使用以下代码在电子邮件中的zip文件中显示图像。

的index.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>

renderer.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://并告诉电子如何使用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正确加载这类资源?

0 个答案:

没有答案