allow using the image path without the component

Author: BitPatty

example/pages/index.tsx

@@ -1,8 +1,10 @@
 import type { NextPage } from 'next';
 import Head from 'next/head';
-import { Fragment as div } from 'react';
 
-import ProxyImage, { ImgProxyParamBuilder } from '../../dist';
+import ProxyImage, {
+  ImgProxyParamBuilder,
+  buildProxyImagePath,
+} from '../../dist';
 
 const demoContent: {
   label: string;
@@ -91,6 +93,28 @@ const Home: NextPage = () => {
             </div>
           ))}
         </div>
+
+        <div>
+          <div>
+            <h2>Background Image</h2>
+            <div
+              style={{
+                backgroundImage: `url(${buildProxyImagePath(
+                  'test-bucket/test-image.png',
+                  new ImgProxyParamBuilder().blur(10).build(),
+                )})`,
+                backgroundSize: 'cover',
+                color: 'white',
+                width: '200px',
+              }}
+            >
+              Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+              Consectetur ipsam voluptates velit, perferendis alias maiores
+              atque rem accusantium culpa vero doloremque repellat porro fugiat
+              nam ad veniam accusamus aliquid molestias.
+            </div>
+          </div>
+        </div>
       </main>
     </>
   );

src/index.tsx

@@ -71,6 +71,13 @@ const imageOptimizer = (
   req.end();
 };
 
+const buildProxyImagePath = (file: string, proxyParams?: string): string => {
+  const urlParams = new URLSearchParams();
+  urlParams.append('src', file);
+  if (proxyParams) urlParams.append('params', proxyParams);
+  return `${IMGPROXY_ENDPOINT}?${urlParams.toString()}`;
+};
+
 type ProxyImageProps = {
   file: string;
   proxyParams?: string;
@@ -98,4 +105,9 @@ const ProxyImage = ({
 };
 
 export default ProxyImage;
-export { imageOptimizer, IMGPROXY_ENDPOINT, ImgProxyParamBuilder };
+export {
+  buildProxyImagePath,
+  imageOptimizer,
+  IMGPROXY_ENDPOINT,
+  ImgProxyParamBuilder,
+};

src/param-builder.ts

@@ -15,6 +15,9 @@ type ForwardType = Partial<ImgProxyParamBuilder> & {
   modifiers: string[];
 };
 
+// See https://github.com/imgproxy/imgproxy/blob/master/docs/generating_the_url_advanced.md
+// for possible transformations
+
 class ImgProxyParamBuilder {
   public readonly fileName: string;
   public readonly modifiers: string[] = [];
@@ -42,7 +45,6 @@ class ImgProxyParamBuilder {
       };
     },
   ): Omit<T, 'resize'> {
-    // Signature: resize:%resizing_type:%width:%height:%enlarge:%extend
     const { type, width, height, enlarge, extend, gravity } = options ?? {};
     this.modifiers.push(
       options