在Web开发期间交换图像

时间:2010-06-02 02:07:46

标签: firefox firebug

如果我用另一个图像替换某个图像,我试图看看某个网页会是什么样子。我不想上传图片,编辑网站等,每次调整时,我都想知道是否有办法在查看远程页面时将页面中的图像更改为本地版本。

我通常使用Firebug来调试Web开发,但是我可以使用任何其他可能执行此操作的工具。

(绝对不可能搜索到这个并找到任何关于在部署的网站上进行动态图像交换的问题,如果这是重复的话,那就很抱歉。)

已添加:我刚尝试替换指向图片的file:/// URI(手动打开图片后从地址栏复制并粘贴),唉,它没有用 - 图像无法改变。

6 个答案:

答案 0 :(得分:8)

它似乎只适用于http [s]协议(可能出于安全原因)。您可以将图像存储在Dropbox等服务上,共享图像或文件夹,然后使用公共网址。

实际上,您可以使用任何可访问Web的图像,因此本地服务器也可以使用。

答案 1 :(得分:1)

如果您的图像位于本地主机服务器中(而不是文件记住),我认为您仍然可以将该localhost网址放在firebug检查元素中并且它将起作用。

尝试了一个绝对文件路径,但它显然不起作用。所以我猜你只需要使用localhost服务器映像。这对我有用

答案 2 :(得分:0)

快速和低技术答案:拍摄页面的屏幕截图,在Photoshop中打开它,然后将本地图像放在网页图像上方的图层上。

答案 3 :(得分:0)

如果您是从网络服务器提供服务,您可能无法将其指向本地驱动器上的文件。即使它的localhost,你也不能指向本地文件c:/test.jpg。它是因为浏览器对沙箱页面进行了排序,因此脚本无法访问本地文件。

一种方法是将新文件(new_file.jpg)上传到网络服务器,给图片链接一个id

<img id="something1" src="test.jpg"/>

在firebug观察窗口中使用jQuery

$("#something1").attr("src","new_file.jpg");

您应该看到图像发生变化。如果您不使用jQuery,可以使用document.getElementById(“something1”)并获取要修改的元素。

答案 4 :(得分:0)

另一种方法是使用http://makiapp.com/

您可以将计算机上的图像叠加到您使用此网站查看的任何网站上。非常酷的工具,用于为您的代码排列comp。

答案 5 :(得分:0)

你可以:

  1. 将测试图片拖到Google云端硬盘
  2. 在浏览器中打开
  3. 转到实际图片路径
  4. 在Firebug
  5. 中使用此路径作为替代

    它几乎与使用本地驱动器一样快。