diff --git a/www/docs/docusaurus.config.js b/www/docs/docusaurus.config.js
index 96d49addb7..53b7e8ce9c 100644
--- a/www/docs/docusaurus.config.js
+++ b/www/docs/docusaurus.config.js
@@ -132,7 +132,7 @@ const config = {
       }
     },
     cloudinaryConfig: {
-      cloudName: 'dza7lstvk', // TODO replace with env variable
+      cloudName: process.env.CLOUDINARY_CLOUD_NAME || "",
       flags: [
         'fl_lossy',
         'f_auto'
diff --git a/www/docs/src/components/CloudinaryImage/index.js b/www/docs/src/components/CloudinaryImage/index.js
index f87f9e8a26..d1eeb916d1 100644
--- a/www/docs/src/components/CloudinaryImage/index.js
+++ b/www/docs/src/components/CloudinaryImage/index.js
@@ -27,7 +27,7 @@ const imageRegex = /^https:\/\/res.cloudinary.com\/.*\/upload\/v[0-9]+\/(?<image
 export default function CloudinaryImage ({ src, ...props }) {
   const { cloudinaryConfig } = useThemeConfig();
   const matchingRegex = src.match(imageRegex)
-  if (!cloudinaryConfig || !matchingRegex?.groups || !matchingRegex.groups.imageId) {
+  if (!cloudinaryConfig || !cloudinaryConfig.cloudName || !matchingRegex?.groups || !matchingRegex.groups.imageId) {
     // either cloudinary isn't configured or
     // could not match url to a cloudinary url
     // default to docusaurus's image component