Swapping an image during web development

I'm trying to see what a certain webpage would look like开发者_如何学C 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.

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.

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

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.

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.

Another way is to use http://makiapp.com/

You can overlay an image from you computer onto any website you look at with this. Very cool tool for lining up a comp with your code.

You can:

1. Drag your test image into Google Drive
2. Open it in a browser
3. Go to the actual image path
4. Use this path as a substitute in Firebug

It's almost as fast as working from a local drive.