Handling images in my react app in production

Question

I am using cloudinary as my cdn service to serve my static images used in my react app. I was wondering if there is any way in which I am easily able to switch between my local image folder when developing my app and switch to the cdn url of my image when in production in a very efficient way.

Answer 1

You can make use of the NODE_ENV environment variable to choose one from both of the urls :-

const imagePath = process.env.NODE_ENV === "production"
    ? "https://prod-images-cdn.com"
    : "http://localhost:8000";