@thead-vantage/react 2.23.0 → 2.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thead-vantage/react",
-  "version": "2.23.0",
+  "version": "2.24.0",
   "description": "React components and utilities for TheAd Vantage ad platform integration",
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/components/AdBanner.tsx

@@ -253,14 +253,6 @@ export function AdBanner({
             height={ad.height || 250}
             className="rounded"
             unoptimized
-            onError={(e) => {
-              // If the logo fails to load (e.g., not in public folder when installed from npm),
-              // try loading from CDN
-              if (ad.id === 'thead-vantage-fallback' && ad.contentUrl === '/TheAd-Vantage-Logo.png') {
-                const target = e.target as HTMLImageElement;
-                target.src = 'https://www.thead-vantage.com/assets/TheAd-Vantage-Logo.png';
-              }
-            }}
           />
         ) : (
           <div className="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded" style={{ width: ad.width || 300, height: ad.height || 250 }}>

package/src/lib/thead-vantage-assets.ts

@@ -3,28 +3,50 @@
  * 
  * Provides fallback assets that work both in the library and when installed from npm.
  * 
- * Note: When the library is installed from npm, the public folder isn't available.
- * The logo is loaded from a CDN URL that works in all environments.
+ * The logo is imported as a module so it gets bundled with the library.
+ * Next.js will process this import and create a URL that works in consuming applications.
  */
 
+// Import the logo image - Next.js will process this and bundle it
+// When the library is used in other Next.js apps, the image will be available
+import theadVantageLogoSrc from '../assets/TheAd-Vantage-Logo.png';
+
 /**
  * Get the URL for the TheAd Vantage logo fallback ad
  * 
- * Uses a CDN URL that works when the library is installed from npm.
- * For local development of the library itself, it will try the public folder first.
+ * Uses the imported image module. Next.js processes image imports and creates
+ * a URL that points to the bundled asset. This works when the library is installed
+ * from npm because the image is included in the library bundle.
  */
 export function getTheadVantageLogoUrl(): string {
-  // Check if we're in the library's own development environment
-  // (where the public folder exists)
-  if (typeof window !== 'undefined') {
-    // Try public folder first (works in library's own dev environment)
-    // This will 404 when installed from npm, but that's okay - the Image component will handle it
-    // and we can add error handling if needed
-    return '/TheAd-Vantage-Logo.png';
+  // Next.js processes image imports and returns either:
+  // - A string URL (in some configurations)
+  // - An object with src, width, height properties (typical Next.js behavior)
+  
+  if (typeof theadVantageLogoSrc === 'string') {
+    return theadVantageLogoSrc;
+  }
+  
+  // Next.js Image import typically returns an object with src property
+  if (typeof theadVantageLogoSrc === 'object' && theadVantageLogoSrc !== null) {
+    // Check for src property (Next.js ImageStaticImport type)
+    if ('src' in theadVantageLogoSrc) {
+      return (theadVantageLogoSrc as { src: string }).src;
+    }
+    // Some bundlers might return the object directly with a default export
+    if ('default' in theadVantageLogoSrc) {
+      const defaultExport = (theadVantageLogoSrc as { default: string | { src: string } }).default;
+      if (typeof defaultExport === 'string') {
+        return defaultExport;
+      }
+      if (typeof defaultExport === 'object' && defaultExport !== null && 'src' in defaultExport) {
+        return (defaultExport as { src: string }).src;
+      }
+    }
   }
   
-  // Server-side: return public folder path
-  return '/TheAd-Vantage-Logo.png';
+  // Fallback to CDN if import doesn't work as expected
+  return 'https://www.thead-vantage.com/assets/TheAd-Vantage-Logo.png';
 }
 
 /**