如何使用 file:// 协议在 Chrome 中显示本地图像？

Question

我希望能够为使用 Chrome 通过 http 传送的网页上的图像指定本地文件路径 - 这可能吗？

我记得使用 IE 执行此操作，但不记得是如何执行的！我认为一些受信任的设置...

Answer 1

您可以将图像转换为 base-64 代码，例如使用“ http://duri.me/ ”并将结果复制到浏览器！喜欢：

<img width='16' height='16'  src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAApklEQVQ4jWP8//8/Ay5Q4s6GU7Jn5y9GBgYGBiacuokELKTYSpQByKB68UkMMUExQ0ZkPsVeYEQPREZGRpK8gOGCdy/PwTEyH8ZGF8MbBgwMDAxC4kZ4xfAaALMFGfz//5+6gYjXBS+fXUHhaxjEMqKrQXGBglU8SgyIS+mgYHR5DAPIAYz////HavL5DQVwtmHABAyND44tZGRgwBMG2DRhAxR7AQBhgT3yD6eBRwAAAABJRU5ErkJggg=='>

Answer 2

由于您提到了“Chrome”，您可以使用 Chrome 扩展程序来执行此操作，以启用对文件的本地访问。

按着这些次序：

1. 在您的图像所在的本地文件夹中，创建名为“manifest.json”的文件并输入：

{"name": "File Exposer", "manifest_version": 2, "version": "1.0", "web_accessible_resources": ["*.jpg","*.JPG"]}

2. 把它放在你的 chrome 地址栏中：chrome://extensions/

3. 确保选中“开发者模式”（页面右上角）

4. 单击“加载未打包的扩展”按钮

5. 导航到图像和 manifest.json 文件所在的本地文件夹，单击确定

6. 扩展名“File Exposer”现在应该列在列表中，并且对“Enabled”有一个复选标记。如果文件夹位于网络驱动器或其他慢速驱动器上，或者包含大量文件，则可能需要 10-20 秒或更长时间才能显示在列表中。

7. 请注意与您的扩展程序关联的“ID”字符串。这是 EXTENSION_ID

8. 现在，在您的 HTML 中，您可以使用以下内容访问该文件，将“EXTERNSION_ID”更改为您的扩展程序生成的任何 ID：

<img src='chrome-extension://EXTENSION_ID/example1.jpg'>

注意，*.jpg 是递归的，它会自动匹配指定文件夹和所有子文件夹中的文件，您不需要为每个子文件夹指定。另请注意，它区分大小写。

在 'img' 标签中，您没有指定原始文件夹，它是该文件夹的相对文件夹，因此只需要指定子文件夹。

如果修改 manifest.json 文件，则需要单击扩展名旁边的“重新加载 (Ctrl+R)”链接。

Answer 3

非本地网页无法访问Chrome 或任何现代网络浏览器中的本地文件。

您可以使用LocalLinks（用于 Firefox）覆盖它，但它只能在您自己的机器上工作。

Answer 4

在 Chrome 中，这看起来像这样

file:///C:/sample.txt