3 Ways To Display An Image onto Browser With Client-Side JavaScript

Lightweight. No plugins or dependencies. Full source code provided.

❝In face of workplace constraints, any individual who values his/her work productivity would naturally create means of overcoming respective hurdles.❞

That is without a doubt the greatest takeaway from my past 5 years of work. When it comes to productivity boosters, a highly effective hackaround I have acquired in the field of technology is to maximise portability of digital tools — i.e. Enabling said resources to be dependency-free and user-friendly. Following the emergence of WebAssembly (WASM), there is now greater incentive than ever to build client-side web applications to fulfil day-to-day work tasks.

Despite the fact that most web browsers have security protocols inplace such as the Cross-Origin Resource Sharing (CORS) Policy —

❝Developers who need to perform local testing should now set up a local server. As all files are served from the same scheme and domain (localhost) they all have the same origin, and do not trigger cross-origin errors.❞

— Source: CORSRequestNotHttp

(In short, unless the the web app is hosted on a server, all attempts to fetch or load any external resource by the browser including plaintext or image files would fail.)

— it is however still possible for a client-side web app to receive external data via…