How To Display TwicPics Images When Working Offline With Nuxt.js

Laurent ‘Strift’ Cazanove
2 min readJun 3, 2022

--

TwicPics is an image transformation and optimization SaaS. It works in the cloud, and front-end developers interact with the API via the JavaScript library. But when working in local, you might not want (or be able) to connect to the Internet.

a sad computer that doesn’t have access to the internet :’(

This happened to me, so I wrote a wrapper component around TwicPics that allows me to fallback to local images when necessary. Of course, this means skipping any image optimization or transformation. But it provides a quick toggle for switching it off and on, which can be useful when working locally.

Adding a on/off switch for local images

First, we’ll add a configuration entry to our Nuxt configuration to be able to easily toggle TwicPics.

In this example, we configure the app to default to local images when we’re in development mode. But we could choose any conditions we like or use a specific environment variable.

Wrapping our images in a component

Now that we have a configuration toggle, let’s create an component that makes use of it. We’ll go with the straightforward approach: when enableOptimization is false, we’ll simply display the image; otherwise, we’ll process it with TwicPics.

And that’s it!

Your BaseImage component will load your local image whenever enableOptimization is false. You don’t have to change your code to keep using TwicPics in production.

Obviously, that’s a simplified example. In reality, you’d probably be wrapping a <TwicImage/> component instead of base <img>. But the overall logic is the same. Read more about @twicpics/components in the documentation.

To go further:

- Nuxt.js docs

- TwicPics docs

- Ask me a question in the comments!

I’m a web developer working with Nuxt.js & serverless. I’m writing about the stuff I learn. You can follow @StriftCodes on Twitter for more related content.

Cheers,

--

--

Laurent ‘Strift’ Cazanove

Writing about Code & Esports, and some things in between. Developer Advocate @TwicPics. Ex @PandaScore