fix(unsplash): Edited how I build the url to make use of withQuery

nuxt · Jan 27, 2023 · 8d409b6 · 8d409b6
1 parent 6ed73a3
commit 8d409b6
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/playground/providers.ts b/playground/providers.ts
@@ -664,7 +664,7 @@ export const providers: Provider[] = [
         link: 'https://unsplash.com/@omidarmin?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText'
       },
       {
-        src: 'https://images.unsplash.com/photo-1532236204992-f5e85c024202?crop=entropy&cs=tinysrgb&ixid=MnwxOTgwMDZ8MHwxfHNlYXJjaHwyOHx8dG9reW98ZW58MHx8fHwxNjczNzk3MDIz',
+        src: 'https://images.unsplash.com/photo-1532236204992-f5e85c024202?crop=entropy&cs=tinysrgb&ixid=MnwxOTgwMDZ8MHwxfHNlYXJjaHwyOHx8dG9reW98ZW58MHx8fHwxNjczNzk3MDIz&w=500',
         width: 300,
         height: 300,
         fit: 'cover',

diff --git a/src/runtime/providers/unsplash.ts b/src/runtime/providers/unsplash.ts
@@ -1,15 +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)
-  const hasQueryParams = src.includes('?')
+  // withQuery requires query parameters as an object, so I parse the modifiers into an object with getQuery
   return {
-    url: withBase(joinURL(src + (operations ? ((hasQueryParams ? '&' : '?') + operations) : '')), baseURL)
+    url: withQuery(withBase(src, baseURL), getQuery('?' + operations))
   }
 }