fix(assets): encode generated urls (#393)

gridsome/lib/app/__tests__/FileProcessQueue.spec.js

@@ -24,6 +24,31 @@ test('generate src for file', async () => {
   expect(result.src).toEqual('/assets/files/dummy.pdf')
 })
 
+test('encode src', async () => {
+  const filePath = path.resolve(context, 'assets/folder name/dummy document.pdf')
+  const queue = new AssetsQueue({ context, config: baseconfig })
+
+  const result = await queue.add(filePath)
+
+  expect(result.filePath).toEqual(filePath)
+  expect(result.src).toEqual('/assets/files/dummy%20document.pdf')
+})
+
+test('encode src in serve mode', async () => {
+  const filePath = path.resolve(context, 'assets/folder name/dummy document.pdf')
+  const queue = new AssetsQueue({ context, config: baseconfig })
+  const mode = process.env.GRIDSOME_MODE
+
+  process.env.GRIDSOME_MODE = 'serve'
+
+  const result = await queue.add(filePath)
+
+  process.env.GRIDSOME_MODE = mode
+
+  expect(result.filePath).toEqual(filePath)
+  expect(result.src).toEqual('/assets/files/assets/folder%20name/dummy%20document.pdf')
+})
+
 test('generate src for file with base path', async () => {
   const filePath = path.resolve(context, 'assets/dummy.pdf')
   const config = { ...baseconfig, pathPrefix: '/base/path' }

gridsome/lib/app/__tests__/ImageProcessQueue.spec.js

@@ -46,6 +46,37 @@ test('generate srcset for image', async () => {
   expect(result.srcset[1]).toEqual('/assets/static/1000x600.97c148e.test.png 1000w')
 })
 
+test('encode src', async () => {
+  const filePath = path.resolve(context, 'assets/folder name/350 250.png')
+  const queue = new AssetsQueue({ context, config: baseconfig })
+
+  const result = await queue.add(filePath)
+
+  expect(result.filePath).toEqual(filePath)
+  expect(result.src).toEqual('/assets/static/350%20250.096da6d.test.png')
+  expect(result.sets[0].src).toEqual('/assets/static/350%20250.096da6d.test.png')
+  expect(result.sets[0].destPath).toEqual(path.join(imagesDir, '350 250.096da6d.test.png'))
+  expect(result.srcset[0]).toEqual('/assets/static/350%20250.096da6d.test.png 350w')
+})
+
+test('encode src in serve mode', async () => {
+  const filePath = path.resolve(context, 'assets/folder name/350 250.png')
+  const queue = new AssetsQueue({ context, config: baseconfig })
+  const mode = process.env.GRIDSOME_MODE
+
+  process.env.GRIDSOME_MODE = 'serve'
+
+  const result = await queue.add(filePath)
+
+  process.env.GRIDSOME_MODE = mode
+
+  expect(result.filePath).toEqual(filePath)
+  expect(result.src).toEqual('/assets/static/assets/folder%20name/350%20250.png?width=350')
+  expect(result.sets[0].src).toEqual('/assets/static/assets/folder%20name/350%20250.png?width=350')
+  expect(result.sets[0].destPath).toEqual(path.join(imagesDir, 'assets/folder name/350 250.png?width=350'))
+  expect(result.srcset[0]).toEqual('/assets/static/assets/folder%20name/350%20250.png?width=350 350w')
+})
+
 test('generate srcset for image with path prefix', async () => {
   const filePath = path.resolve(context, 'assets/1000x600.png')
   const config = { ...baseconfig, pathPrefix: '/site-art' }

gridsome/lib/app/queue/FileProcessQueue.js

@@ -63,8 +63,10 @@ class FileProcessQueue {
       filename = `${name}${urlHash}${ext}`
     }
 
+    const src = forwardSlash(path.join(pathPrefix, filesDir, filename))
+
     return {
-      src: forwardSlash(path.join(pathPrefix, filesDir, filename))
+      src: encodeURI(src)
     }
   }
 }

gridsome/lib/app/queue/ImageProcessQueue.js

@@ -121,7 +121,7 @@ class ImageProcessQueue {
       const filename = this.createFileName(filePath, arr, hash)
       const relPath = createDestPath(filename, arr)
       const destPath = path.join(this.config.outDir, relPath)
-      const src = forwardSlash(path.join(pathPrefix, relPath))
+      const src = encodeURI(forwardSlash(path.join(pathPrefix, relPath)))
 
       return { filename, destPath, src, width, height }
     })