使用 Chrome 开发工具在实时站点上测试本地背景图像？答案

【问题标题】：Test Local Background Image on Live Site with Chrome Dev Tools?使用 Chrome 开发工具在实时站点上测试本地背景图像？
【发布时间】：2023-03-06 13:37:02
【问题描述】：

有没有办法使用 Chrome 开发工具来测试不同的图像？我创建了一个新的背景图形，我想在一个已经在 <body> 标签上具有背景图形的实时站点上对其进行测试。不过，我还不想更改实时站点。只需对其进行测试以查看新图像的外观。这可能吗？

【问题讨论】：

Google Chrome Extensions - Can't load local images with CSS的可能重复

标签： css image google-chrome testing google-chrome-devtools

【解决方案1】：

另一种选择是启动一个简单的 http 服务器。

在您的终端（或命令提示符）中，cd 进入保存图像的目录，然后为 Python 2 输入 python -m SimpleHTTPServer。

对于 Python 3，使用以下命令：python -m http.server [<portNo>]

现在您可以使用 http://localhost:8000/filename.jpg 在开发工具中引用图像。

【讨论】：

刚用过这个。非常好的解决方法。我想知道为什么现在是政策（当我开始上网时没有回来）。如果允许“localhost”是一个安全修复程序，这似乎也很愚蠢
智能、简单，最重要的是，快速
希望我先阅读这篇文章。 chrome 扩展是一个聪明的解决方案，但对于那些使用现成的 http-server 命令的人来说，这要简单得多。
这是真正的解决方案，哇，永远改变我的生活。从字面上看需要2秒。太棒了。

【解决方案2】：

天哪，六年有多么不同！在https://umaar.com/dev-tips/174-drag-drop-image-local-overrides/ 找到了这个非常简单的方法

打开 Chrome 检查器首选项。
选中“启用本地覆盖”。
在html中找到原图。
右键单击文件路径，然后选择“在源面板中定位”。
在源面板的左侧面板中选择图像后，拖动桌面上的替换图像并放到预览面板上在右边。
当您将鼠标悬停时，您会看到一个虚线轮廓，其中包含文字“Drop image 文件在这里。” 将图像文件放在那里。;-)
您可能需要刷新页面才能显示新图像。是的，只要 Inspector 处于打开状态并且“本地覆盖”已启用。

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

【讨论】：

最后，这对我有用..!!简单，只需拖放东西?

【解决方案3】：

我认为最好和最简单的解决方案是将您的图像转换为 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==");
}

【讨论】：

【解决方案4】：

~~您可以将Elements 面板中的背景图片的网址替换为您想尝试的图片的网址。 Check this link 看看是怎么做到的。~~

此更改将立即在您的浏览器窗口中生效。正如Johan Linder 所提到的，您必须将图像托管在某处，以防您的计算机上有图像。

nate wilton's answer 正确指出了如何使用 Chrome 扩展程序来做到这一点。

【讨论】：

无需在某处托管图像，只需使用file:// URL（除非页面有严格的内容安全策略。）
我无法让file:// 工作。我在 Chrome 中打开本地图像并将 url (file:///Users/mcarroll/Desktop/SLAM!/BBB/background.png) 复制到背景图像属性中，但它仍然无法加载。我最终只是将文件上传到另一个站点，复制 URL，然后将其粘贴到属性中。效果很好。
@mcography：你说得对，Chrome 的安全策略不允许你加载本地资源。我不认为有任何方法可以改变这一点。

【解决方案5】：

这是答案，由 Rob Donovan @ superuser 提供（来自https://superuser.com/a/839500/454034）

由于您提到了“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”现在应该列在列表中，并且对“已启用”有一个复选标记。如果文件夹位于网络驱动器或其他慢速驱动器上或包含大量文件，则可能需要 10-20 秒或更长时间才会出现在列表中。

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

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

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

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

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

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

【讨论】：

这仅适用于前景图像吗？我正在尝试添加到 CSS，但我看不到它的工作。我想知道它是否仅适用于 img 标签？
非常感谢。我已经使用这种技术来连接本地 css。有没有办法查看实时更新或在不加载恢复到旧参考的 dom 的情况下刷新 css 的方法？
@tiny_m 它适用于开发工具的标签和 CSS 部分。如果这就是你的意思，我没有尝试将它放在 CSS 文件中。

【解决方案6】：

这不是您问题的确切答案，但您可以使用类似dropbox public folder 的方法来解决此问题。图像在文件夹中后，您只需右键单击并复制公共 url 以在开发工具中使用。

【讨论】：

为了可用性/易于找到解决方案，这是一个很棒的答案。谢谢。比扩展黑客更省力。
由于 stack-o 的信誉系统，我无法对上述内容发表评论，但上述 Dropbox 方法不再有效。自 2017 年 9 月 1 日起，所有用户的公共链接均已停用。
正如这个答案中的链接现在所说，没有更多的公共 Dropbox 链接。
如果您不关心公开分享，imgur 也可以使用