fix: accept src without filename (#14)

* fix: accept src without filename

* chore(readme): add few words about filenames and output dimension limits

Author: nd0ut

README.md

@@ -169,7 +169,9 @@ where `anotherLoader` will be used instead of the Uploadcare loader for this par
 
 ## Notes
 
-If you pass a local image url, the loader returns it AS IS if the app is run in the development mode or if the `NEXT_PUBLIC_UPLOADCARE_APP_BASE_URL` is not set.
+- If you have jpegs larger than 3000px and you want loader to resize them up to 5000px, you need to pass filename with `jpeg` or `jpg`  extension to the src url. See [Output image dimensions docs](https://uploadcare.com/docs/transformations/image/#dimensions) for more details. When no filename provided, we'll treat the image as non-jpeg and can resize it up to 3000px only.
+
+- If you pass a local image url, the loader returns it AS IS if the app is run in the development mode or if the `NEXT_PUBLIC_UPLOADCARE_APP_BASE_URL` is not set.
 
 ## Known Issues
 

src/__tests__/uploadcare-image.spec.tsx

@@ -8,12 +8,16 @@ import { addEnvVar, removeEnvVar } from './utils';
 
 describe('UploadcareImage', () => {
   beforeEach(() => {
+    addEnvVar('NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY', 'test-public-key');
+
     cleanup();
   });
 
-  test('The UploadcareImage component renders passed image with default settings properly', () => {
-    addEnvVar('NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY', 'test-public-key');
+  afterEach(() => {
+    removeEnvVar('NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY');
+  });
 
+  test('The UploadcareImage component renders passed image with default settings properly', () => {
     const src =
       'https://ucarecdn.com/a6f8abc8-f92e-460a-b7a1-c5cd70a18cdb/vercel.png';
 
@@ -32,7 +36,24 @@ describe('UploadcareImage', () => {
     expect(screen.getByRole('img').getAttribute('src')).toEqual(
       'https://ucarecdn.com/a6f8abc8-f92e-460a-b7a1-c5cd70a18cdb/-/format/auto/-/stretch/off/-/progressive/yes/-/resize/1080x/-/quality/normal/vercel.png'
     );
+  });
 
-    removeEnvVar('NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY');
+  test('The UploadcareImage component should accept src without filename', () => {
+    const src = 'https://ucarecdn.com/a6f8abc8-f92e-460a-b7a1-c5cd70a18cdb/';
+
+    render(
+      <UploadcareImage
+        src={src}
+        width={500}
+        height={500}
+        quality={80}
+        // Necessary because lazy-loading causes a placeholder image render first.
+        loading="eager"
+      />
+    );
+
+    expect(screen.getByRole('img').getAttribute('src')).toEqual(
+      'https://ucarecdn.com/a6f8abc8-f92e-460a-b7a1-c5cd70a18cdb/-/format/auto/-/stretch/off/-/progressive/yes/-/resize/1080x/-/quality/normal/'
+    );
   });
 });

src/utils/loader.ts

@@ -80,7 +80,7 @@ export function uploadcareLoader({
 
   const isJpeg =
     requestedFormat === 'jpeg' ||
-    (requestedFormat === 'auto' && isJpegExtension(extension));
+    (requestedFormat === 'auto' && !!extension && isJpegExtension(extension));
   const maxResizeWidth = getMaxResizeWidth(width, isJpeg);
   const forceJpeg = isJpeg && maxResizeWidth > MAX_OUTPUT_IMAGE_DIMENSION;