Visually test local Ad images on live web pages

Recently, I've had to design creative Ads for websites I'm sponsoring for Analytics Bar.  Designing creative ads is definitely not my strong suit and to help me design a "perfect" Ad I wanted to be able to visually preview how my Ad would look on the exact web page my Ad would show up for sponsorship.   However, with this strategy, there is no easy way to do this, especially trying to test multiple images.  

In Chrome and other modern browsers there is no easy way to do this due to security reasons.  You cannot just open up developer tools and manually update an img tag src attribute with your local file path of "file:///C:/Ads/AB-Ad-test1.png".

It just doesn't work.  You can either open yourself up to vulnerabilities by disabling this feature in Chrome or run a local web server which then you can edit an img tag src attribute with a real url "http://localhost:8080/AB-Ad-test1.png".  

However, even if you could manually edit html to include your local files, that is still too tedious.  I wished for a better way. And now there is!  In comes Image Injector a chrome extension I created for this exact problem that allows you to simply drag and drop any local image file onto any web page safely and secure.  Depending on where you drop the file it will either replace an image already on screen or places a re-sizable image on the web page that you can then move around anywhere on the screen:) Hope you enjoy!