![如何使用 file:// 协议在 Chrome 中显示本地图像?](https://linux22.com/image/1259743/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%20file%3A%2F%2F%20%E5%8D%8F%E8%AE%AE%E5%9C%A8%20Chrome%20%E4%B8%AD%E6%98%BE%E7%A4%BA%E6%9C%AC%E5%9C%B0%E5%9B%BE%E5%83%8F%EF%BC%9F.png)
我希望能够为使用 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 扩展程序来执行此操作,以启用对文件的本地访问。
按着这些次序:
- 在图像所在的本地文件夹中,创建名为“manifest.json”的文件并输入以下内容:
{"name": "File Exposer", "manifest_version": 2, "version": "1.0", "web_accessible_resources": ["*.jpg","*.JPG"]}
将其输入到您的 chrome 地址栏中:chrome://extensions/
确保已选中“开发者模式”(页面右上角)
点击“加载解压后的扩展程序”按钮
导航到包含图像和 manifest.json 文件的本地文件夹,单击“确定”
扩展程序“File Exposer”现在应该列在列表中,并且带有“已启用”的复选标记。如果文件夹位于网络驱动器或其他慢速驱动器上,或者包含大量文件,则可能需要 10-20 秒或更长时间才能出现在列表中。
请注意与您的扩展程序关联的“ID”字符串。这是 EXTENSION_ID
现在,您可以在 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