How to preview your local image in HTML?

Web design tip

Preview an image from your PC live in your app

Nifty way to hack this problem - non APEX related

It is totally APEX unrelated but still can be used by developers regardless of technology.

Ever wanted to preview how your newly designed image will look like once you upload it to an app. I know what you will say why would I even want/need to do this now when we have apex-frontend-boost or by doing it directly in your app.

What if you do not have access to DEV/PROD environment or application server and need to deliver newly designed image for your client application? Or maybe you do not want to bother setting these up. Or just wanna do one-off thing.

If you google this more than once probably means you need to write it down, doesn't it. So doing the same for my future reference.

Situation: Create a logo for client Facebook account. You spent time to design a new logo and now it is time to try it before it gets deployed by your client.

How do we go about to test this?

Again google is your friend, I found this solution there too and I am sure all of them work in a similar way.

If you inspect your FB page you are looking for section containing "_qa1" class this is where normally FB logo sits:

<div class="_qa1"><a aria-label="Profile picture" class="_2dgj" href="....." rel="theater"><img class="_4jhq img" src="..." alt="" width="170" height="170"></a><!-- react-empty: 8 --></div>

1. Open browser inspector tool. Please remember not to refresh the page at any point as changes will be lost.
2. Find an image you want to temporary replace. Check if it has ID assigned if not assign one to it by changing its DOM HTML with ID = "your_ID".
3. After the image add this code into your HTML:

   <input onchange="document.getElementById('your_ID').src = window.URL.createObjectURL(this.files[0])" type="file" >

What this will do is let you upload the file from your local PC. Simple. 

Once you show it to your client and you all are happy, it is deployment time.

Thanks,

SLino