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
false, we’ll simply display the image; otherwise, we’ll process it with TwicPics.
And that’s it!
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.