Css 使用Chrome开发工具在现场测试本地背景图像？

有没有办法使用Chrome开发工具来测试不同的图像？我已经创建了一个新的背景图形，我想在一个在

标签上已经有背景图形的实时站点上测试它。不过，我还不想更改live站点。只需测试一下，看看新图像是什么样子。这可能吗？

这不是对你问题的确切答案，但你可以这样做的一种方法是使用类似的方法。一旦图像位于文件夹中，您就可以右键单击并复制一个公共url，以便在开发工具中使用

您可以在

元素

面板中将背景图像的url替换为要尝试的图像的url。看看是怎么做到的

此更改将立即在浏览器窗口中显示效果。如前所述，如果您的计算机上有图像，您必须在某个位置托管该图像

---

正确指出了如何使用Chrome扩展来实现这一点。

以下是答案，由Rob Donovan@superuser（via）提供

既然您提到了“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”字符串。这是分机号

8） 现在，在HTML中，您可以使用以下内容访问文件，将“扩展名\u ID”更改为扩展名生成的任何ID：

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

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

在“img”标记中，您不指定原始文件夹及其与该文件夹的相对文件夹，因此只需指定子文件夹

---

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

另一个选项是启动简单的http服务器

在终端（或命令提示符）中，

cd

进入图像保存目录，然后键入

python-msimplehttpserver

---

现在，您可以使用

http://localhost:8000/filename.jpg

我认为最好、最简单的解决方案是将图像转换为Base64（您可以使用任何在线/离线工具），然后将输出粘贴到DevTools中

如果您需要在IMG标签中使用，请按以下方式操作：

<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

.background {
  background-image: url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg==");
}

---

天啊，六年真是不一样！找到了这个简单的方法

打开Chrome inspector首选项

选中“启用本地覆盖”

在html中找到原始图像

右键单击文件路径，然后选择“在源中定位”面板

在“源”面板左侧面板中选择图像后，拖动 将替换图像从桌面复制到预览面板上 在右边

当您悬停时，您将看到带有文字“Drop image”的虚线轮廓 文件在这里。“将图像文件放到那里。”。-）

您可能需要刷新页面才能显示新图像。对 只要检查员是开放的和“本地”的，它就会持续 “覆盖”已启用

---

注意：文件名不会在浏览器中更改，但新图像将显示在先前显示的原始图像的位置。

无需在某个位置托管图像，只需使用

文件：//

URL（除非页面有严格的内容安全策略。）我无法使

文件：//

正常工作。我在Chrome中打开了本地图像并复制了url（

file:///Users/mcarroll/Desktop/SLAM！/BBB/background.png

）导入到背景图像属性中，但仍无法加载。我最终只是将文件上传到另一个站点，复制URL，然后将其粘贴到属性中。“你说得对，Chrome的安全策略不允许你加载本地资源。”。我不认为有任何方法可以改变这一点。这只适用于前景图像吗？我试图添加到CSS，但我看不到它的工作。我想知道它是否只对img标签有效？这太好了，谢谢。我用这种技术连接了本地css。有没有什么方法可以看到实时更新，或者可以在不加载dom的情况下刷新css，从而恢复到旧的引用？可能的重复为了可用性/易于找到解决方案，这是一个非常好的答案。谢谢与扩展黑客相比，我的工作量要小得多。由于stack-o的声誉系统，我无法对上述内容发表评论，但上面提到的dropbox方法不再有效。截至2017年9月1日，所有用户的公共链接都已被禁用。正如此答案中的链接所示，不再有公共Dropbox链接。如果您不关心公开共享，imgur也可以使用此链接。非常好的解决方法。我想知道为什么这是现在的政策（当我开始上网时还没有回来）。如果这是一个安全修复程序，允许“localhost”智能、简单，最重要的是，fastWish，那么这看起来也很愚蠢。我先读了这篇文章。chrome扩展是一个聪明的解决方案，但对于那些拥有现成http服务器命令的人来说，这要简单得多。这才是真正的解决方案，哇，永远改变我的生活。实际上需要2秒钟。好极了。