gpt4 book ai didi

css - 使用 Chrome 开发工具在实时站点上测试本地背景图像?

转载 作者:技术小花猫 更新时间:2023-10-29 10:18:00 28 4
gpt4 key购买 nike

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

最佳答案

这是答案,由 Rob Donovan @ super 用户提供(来自 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 - 使用 Chrome 开发工具在实时站点上测试本地背景图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24785547/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com