fix(unsplash): merge query params with src (nuxt#712)

playground/providers.ts

@@ -671,6 +671,16 @@ export const providers: Provider[] = [
         format: 'auto',
         from: 'Photo by Omid Armin',
         link: 'https://unsplash.com/@omidarmin?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'
+      },
+      {
+        src: 'https://images.unsplash.com/photo-1532236204992-f5e85c024202?crop=entropy&cs=tinysrgb&ixid=MnwxOTgwMDZ8MHwxfHNlYXJjaHwyOHx8dG9reW98ZW58MHx8fHwxNjczNzk3MDIz&w=500',
+        width: 300,
+        height: 300,
+        fit: 'cover',
+        quality: 75,
+        format: 'auto',
+        from: 'Photo by Jezael Melgoza',
+        link: 'https://unsplash.com/@jezar?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'
       }
     ]
   },

src/runtime/providers/unsplash.ts

@@ -1,14 +1,15 @@
 // https://unsplash.com/documentation#dynamically-resizable-images
 
-import { joinURL, withBase } from 'ufo'
+import { getQuery, withBase, withQuery } from 'ufo'
 import type { ProviderGetImage } from '../../types'
 import { operationsGenerator } from './imgix'
 
 const unsplashCDN = 'https://images.unsplash.com/'
 
 export const getImage: ProviderGetImage = (src, { modifiers = {}, baseURL = unsplashCDN } = {}) => {
   const operations = operationsGenerator(modifiers)
+  // withQuery requires query parameters as an object, so I parse the modifiers into an object with getQuery
   return {
-    url: withBase(joinURL(src + (operations ? ('?' + operations) : '')), baseURL)
+    url: withQuery(withBase(src, baseURL), getQuery('?' + operations))
   }
 }