我可以使用以下代码在电子邮件中的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 标签在webview中呢？像这样 .

<!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正确加载这种资源？

javascript electron