feat: Added local image support

Merge pull request #6 from uploadcare/local-images-support

Author: kkomelin

README.md

@@ -58,6 +58,13 @@ Alternatively, in case you're using a custom proxy, set the proxy domain.
 NEXT_PUBLIC_UPLOADCARE_CUSTOM_PROXY_DOMAIN="proxy.example.com"
 ```
 
+Then set the app base path (to get relative image urls processed in Production):
+
+```ini
+#.env
+NEXT_PUBLIC_UPLOADCARE_APP_BASE_PATH="https://example.com/"
+```
+
 That's it. You may now use `@uploadcare/nextjs-loader` in your app (see [Usage](#usage)).
 
 ---

example/pages/_app.tsx

@@ -1,7 +1,8 @@
-import '../styles/globals.css'
 import type { AppProps } from 'next/app'
+import { ReactElement } from 'react'
+import '../styles/globals.css'
 
-function MyApp({ Component, pageProps }: AppProps) {
+function MyApp({ Component, pageProps }: AppProps): ReactElement {
   return <Component {...pageProps} />
 }
 export default MyApp

example/pages/index.tsx

@@ -67,6 +67,15 @@ const Home: NextPage = () => (
         width={64}
         height={64}
         loader={uploadcareLoader}
+      />
+       <hr className={styles.hr} />
+      <p>Local image will be served AS IS in Development, and converted to the absolute URL and passed to the proxy in Production</p>
+      <Image
+        alt="A local image"
+        src="/local_image.png"
+        width={494}
+        height={332}
+        loader={uploadcareLoader}
       />
       <hr className={styles.hr} />
       Checkout the documentation for{' '}

example/public/local_image.png

@@ -284,6 +284,11 @@
     "@typescript-eslint/types" "4.33.0"
     eslint-visitor-keys "^2.0.0"
 
+"@uploadcare/nextjs-loader@*":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@uploadcare/nextjs-loader/-/nextjs-loader-0.1.0.tgz#e922dfd2275a63890a09c2d3190ce385e6e28426"
+  integrity sha512-cGomYrxKdMl+JCPIe0E6Pb0vS+2RHon4+ezBO1dLsIvzzkgMKvZEVC8fplWg1j7pzUpxvgAnAMNN+Pri3XhaRQ==
+
 acorn-jsx@^5.3.1:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
@@ -3144,11 +3149,6 @@ unpipe@1.0.0:
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
   integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
 
-uploadcare-nextjs-loader1@*:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/uploadcare-nextjs-loader1/-/uploadcare-nextjs-loader1-0.1.0.tgz#9c28a377ff76d06c5773ec5beb01d7e5f09ddeed"
-  integrity sha512-zU9pXyj2O8krjrgULAvuk/T6PaED0tUULS6OvEJsA11jbSjU5PSNhc3RRZJYkfr8bHWQ6JK1RsdYA9OAAQlkLQ==
-
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"

example/yarn.lock

@@ -7,24 +7,54 @@ describe('uploadcareLoader', () => {
     cleanup();
   });
 
-  test("The loader validates the 'src' parameter", () => {
+  test("The loader returns relative 'src' AS IS in Development environment", () => {
     addEnvVar('NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY', 'test-public-key');
 
     const src = '/relative/image.jpg';
 
-    const t = () => {
-      uploadcareLoader({
-        src,
-        width: 0,
-        quality: 80
-      });
-    };
+    const result = uploadcareLoader({
+      src,
+      width: 0,
+      quality: 80
+    });
 
-    expect(t).toThrow(
-      `Failed to parse "${src}" in "uploadcareLoader", Uploadcare loader doesn't support relative images.`
-    );
+    expect(result).toEqual(src);
+
+    removeEnvVar('NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY');
+  });
+
+  test("The loader builds up a relative 'src' to the absolute URL and passes it to the proxy in Production environment", () => {
+    addEnvVar('NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY', 'test-public-key');
+    addEnvVar('NODE_ENV', 'production');
+
+    // When the base path is not set through env vars.
+
+    const src = '/relative/image.jpg';
+
+    let result = uploadcareLoader({
+      src,
+      width: 0,
+      quality: 80
+    });
 
+    expect(result).toEqual(src);
+
+    // When the base path is set through env vars.
+
+    const basePath = 'https://example.com';
+    addEnvVar('NEXT_PUBLIC_UPLOADCARE_APP_BASE_PATH', basePath);
+
+    result = uploadcareLoader({
+      src,
+      width: 0,
+      quality: 80
+    });
+
+    expect(result).toEqual(`${basePath}${src}`);
+
+    removeEnvVar('NEXT_PUBLIC_UPLOADCARE_APP_BASE_PATH');
     removeEnvVar('NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY');
+    removeEnvVar('NODE_ENV');
   });
 
   test('The loader requires either a public key or a custom proxy domain', () => {
@@ -117,7 +147,7 @@ describe('uploadcareLoader', () => {
     removeEnvVar('NEXT_PUBLIC_UPLOADCARE_TRANSFORMATION_PARAMETERS');
   });
 
-  test("The loader doesn't process SVG and GIF", () => {
+  test("The loader doesn't process SVG and GIF (absolute url)", () => {
     const src = 'https:/example.com/image.svg';
 
     addEnvVar('NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY', 'test-public-key');
@@ -128,7 +158,23 @@ describe('uploadcareLoader', () => {
       quality: 80
     });
 
-    expect(result).toBe(`https://test-public-key.ucr.io${src}`);
+    expect(result).toBe(src);
+
+    removeEnvVar('NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY');
+  });
+
+  test("The loader doesn't process SVG and GIF (relative url)", () => {
+    const src = '/image.svg';
+
+    addEnvVar('NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY', 'test-public-key');
+
+    const result = uploadcareLoader({
+      src,
+      width: 500,
+      quality: 80
+    });
+
+    expect(result).toBe(src);
 
     removeEnvVar('NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY');
   });

src/__tests__/uploadcare-loader.spec.ts

@@ -38,7 +38,11 @@ export function uploadcareLoader({
   const proxyEndpoint =
     customProxyEndpoint || generateDefaultProxyEndpoint(publicKey);
 
-  const root = trimTrailingSlash(proxyEndpoint);
+  const basePath = trimTrailingSlash(
+    process.env.NEXT_PUBLIC_UPLOADCARE_APP_BASE_PATH || ''
+  );
+
+  const proxy = trimTrailingSlash(proxyEndpoint);
 
   const isOnCdn = isCdnUrl(src, cdnDomain);
 
@@ -53,19 +57,27 @@ export function uploadcareLoader({
     }
 
     if (src.startsWith('/')) {
-      throw new Error(
-        `Failed to parse "${src}" in "uploadcareLoader", Uploadcare loader doesn't support relative images.`
-      );
+      return src;
+    }
+  }
+
+  // Process local images in Production.
+  if (isProduction() && !isOnCdn && src.startsWith('/')) {
+    const isBasePathSet = !isDotenvParamEmpty(basePath);
+
+    if (!isBasePathSet) {
+      return src;
     }
+
+    return `${basePath}${src}`;
   }
 
   const filename = getFilename(src);
   const extension = getExtension(filename);
 
   // Some extensions are not processed by Uploadcare, e.g. SVG.
   if (NOT_PROCESSED_EXTENSIONS.includes(extension)) {
-    // @todo: Test non-CDN urls.
-    return isOnCdn ? src : `${root}${src}`;
+    return isOnCdn ? src : `${basePath}${src}`;
   }
 
   // Demo: https://ucarecdn.com/a6f8abc8-f92e-460a-b7a1-c5cd70a18cdb/-/format/auto/-/resize/300x/vercel.png
@@ -94,5 +106,5 @@ export function uploadcareLoader({
     return `${withoutFilename}${apiParamsString}${filename}`;
   }
 
-  return `${root}${apiParamsString}${src}`;
+  return `${proxy}${apiParamsString}${src}`;
 }