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

23

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

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

google-chrome url pictures

— JSH
source

14

您可以将图片转换为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=='>

— 迪奥戈·西德
source

7

这些信息可能对某些人有用，但是我认为它并不能真正回答这个问题。

— G-Man说'Resstate

12

由于您提到了“ 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）”链接。

— 罗伯·多诺万
source

8

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

您可以使用LocalLinks（适用于Firefox）覆盖此设置，但它只能在您自己的计算机上使用。

— 引力
source

2

不适用于图像

— Willem D'Haeseleer

我认为chrome很笨，我正在尝试在一个about:blank页面上使用它，但不允许这样做，我厌倦了打开本地HTML文件，即使使用@ WillemD'Haeseleer说了什么，它也适用于图像。我的代码是这样的：drawing = new Image(); drawing.src = "C:/Users/S/Videos/net.png";

— Shayan

2

在Chrome中看起来像这样

file:///C:/sample.txt

— 库茨切拉
source

我正在做类似的事情，托管在Web上，但是正在查看用户的本地文件。...<！DOCTYPE html PUBLIC“-// W3C // DTD XHTML 1.0 Strict // EN”“ w3.org/TR /xhtml1/DTD/xhtml1-strict.dtd “> <html xmlns =” w3.org/1999/xhtml “> <head> <meta http-equiv =” Content-Type“ content =” text / html; charset = utf -8“ /> <title>示例</ title> </ head> <body> <img src =” file：/// c：/graphics/image.jpg“ height =” 200px“ width =” 200px“ / > <h1>欢迎</ h1> <p>你好，世界！</ p> </ body> </ html>

— JSH 2010年

1

我只是尝试使用file：///表示法的.html和.jpg文件，它们均已正确渲染。您能否发布一个显示地址栏和某些内容的屏幕截图？

— KutscheraIT 2010年

尝试jsh.learningict.net-显然您没有图像，但是代码向您展示了我的想法

— JSH 2010年

我只能猜到您指的是图像标记，当我用<img src =“ file：/// c：\ test.jpg” height =“ 200px” width =“ 200px”替换src时，它也可以正常工作> c：\ test.jpg在该路径中是有效的jpg并显示正常。

— KutscheraIT 2010年

想知道这是否是osx吗？在src裁判工作正常，独自一人在Chrome的地址栏，只是没有在HTML代码

— JSH

2

如果要在实时站点上测试本地图像，则可以运行本地Web服务器并使用DevTools在页面上设置URL，例如http://127.0.0.1:8123/img.jpg

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

如果您有python，请在所选文件夹中运行嵌入式http服务器

python3 -m http.server 8123＃python 3版本
python -m SimpleHTTPServer 8123＃python 2版本
使用生产就绪的服务器，如nginx，apache

— 科特
source

0

就我而言，我只需要查看在不同的响应大小下一个小的图像变化是什么样子。将完整的网页另存为...最简单的方法是将其保存到桌面，然后打开它。我检查并编辑图像src。

— 长坤
source

这似乎根本不是OP所要的，甚至根本没有关系。请仔细阅读问题，除非有相关信息要添加，否则请勿回答或评论。

— 音乐2

1

但这就是我想要的

— 塞缪尔·汤普森

-1

好的，您不能只允许别人访问您的本地文件系统！您将需要像Apache这样的服务器服务，让您的计算机一天24小时不间断运行，确保它不会过热，确保良好的安全性，甚至还要做很多工作。而且由于服务器管理既昂贵又费时，因此大多数人都让专业人士为我们托管我们的东西（虚拟主机）。

总之，如果您不想运行自己的服务器，只需将其上传到您选择的网络托管服务商会容易得多。

— 用户名
source

2

问题不在于让互联网访问本地系统上的大型文件。

— xenoid