☰

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

tag-icon • tag-icon google-chrome url pictures
如何使用 file:// 协议在 Chrome 中显示本地图像？

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

我记得使用 IE 执行此操作，但不记得怎么做了！我认为是一些值得信赖的设置……

答案1

您可以将图像转换为 base-64 代码，例如使用“https://www.base64-image.de/“并将结果复制到浏览器！例如：

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

答案2

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

按着这些次序：

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

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

  1. 将其输入到您的 chrome 地址栏中：chrome://extensions/

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

  3. 点击“加载解压后的扩展程序”按钮

  4. 导航到包含图像和 manifest.json 文件的本地文件夹，单击“确定”

  5. 扩展程序“File Exposer”现在应该列在列表中，并且带有“已启用”的复选标记。如果文件夹位于网络驱动器或其他慢速驱动器上，或者包含大量文件，则可能需要 10-20 秒或更长时间才能出现在列表中。

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

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

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

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

在“img”标签中，您无需指定原始文件夹，它与该文件夹相关，因此只需要指定子文件夹。

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

答案3

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

您可以使用以下方法覆盖它本地链接（对于 Firefox)，但它只能在您自己的机器上工作。

答案4

如果你想在现场测试本地图像，你可以运行本地网络服务器并设置 URL，例如http://127.0.0.1:8123/img.jpg使用 DevTools 在页面上

运行 Web 服务器有多种方式：1. 带有定义文件夹的浏览器扩展“Chrome 版 Web 服务器” https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

  1. 如果你有 python，那么运行嵌入http 服务器在选定的文件夹中

    python3 -m http.server 8123 # python 3 版本
    python -m SimpleHTTPServer 8123 # python 2 版本

  2. 使用生产就绪服务器，例如nginx，阿帕奇

相关内容