Swapping an image during web development

Question

I'm trying to see what a certain webpage would look like if I replaced a certain image with another. Rather than upload the image, edit the site, etc, each time I tweak it, I'd like to know if there's a way to change the image in the page to my local version while viewing the remote page.

I use Firebug for debugging web development usually, but I'm open to any other tool that might do this.

(It is absolutely impossible to search for this and find anything but questions about dynamic image swapping on a deployed website, so sorry if this is a duplicate.)

Added: I just tried substituting a file:/// URI pointing to the image (copied and pasted from the address bar after manually opening the image), and alas, it did not work — the image fails to change.

Answer 1

If your image is in a localhost server(not as file mind you) i think you can still put that localhost url in the firebug inspect element and it'll work.

Tried an absolute file path but it doesn't work apparently. So I guess you just have to make do with a localhost server image. That works for me

Answer 2

It seems to only work with the http[s] protocols (likely for security reasons). You can store your images on service like Dropbox, share the image or folder, then use the public URLs.

Really, you can use any web accessible images, so a local server would work too.

Answer 3

Quick and Lowtech Answer: Take a screen shot of the page open it in photoshop and drop the local image on a layer above the webpage image.

Answer 4

Hi if you are serving from a webserver, u probably can't point it to a file on ur local drive. Even if its localhost, u can't point to a local file c:/test.jpg for example. Its because the browser sorts of sandbox ur page so that scripts can't access local files.

One way is to upload the new file (new_file.jpg) to the webserver, give the image link an id

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

Using jQuery in the firebug watch window do

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

You should see the image change. If you are not using jQuery, you can use document.getElementById("something1") and get the element to modify.