fix: more robust handling for parsing 'srcset' attribute value (#1057)

* fix #1052

* added test case for #1052

Author: Jinjiang

lib/template-compiler/modules/transform-srcset.js

@@ -28,10 +28,15 @@ function transform (node) {
           return { require: urlToRequire(url), descriptor: descriptor }
         })
 
-        let code = ''
-        imageCandidates.forEach((o, i, a) => {
-          code += o.require + ' + " ' + o.descriptor + (i < a.length - 1 ? ', " + ' : '"')
-        })
+        // "require(url1)"
+        // "require(url1) 1x"
+        // "require(url1), require(url2)"
+        // "require(url1), require(url2) 2x"
+        // "require(url1) 1x, require(url2)"
+        // "require(url1) 1x, require(url2) 2x"
+        const code = imageCandidates.map(
+          ({ require, descriptor }) => `${require} + "${descriptor ? ' ' + descriptor : ''}, " + `
+        ).join('').slice(0, -6).concat('"').replace(/ \+ ""$/, '')
 
         attr.value = code
       }

test/fixtures/transform.vue

@@ -4,8 +4,12 @@
   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
     <image xlink:href="./logo.png" />
   </svg>
+  <img src="./logo.png" srcset="./logo.png">
   <img src="./logo.png" srcset="./logo.png 2x">
+  <img src="./logo.png" srcset="./logo.png, ./logo.png 2x">
+  <img src="./logo.png" srcset="./logo.png 2x, ./logo.png">
   <img src="./logo.png" srcset="./logo.png 2x, ./logo.png 3x">
+  <img src="./logo.png" srcset="./logo.png, ./logo.png 2x, ./logo.png 3x">
   <img
     src="./logo.png"
     srcset="

test/test.js

@@ -444,11 +444,14 @@ describe('vue-loader', () => {
       const dataURL = vnode.children[0].data.attrs.src
 
       // image tag with srcset
-      expect(vnode.children[4].data.attrs.srcset).to.equal(dataURL + ' 2x')
-      // image tag with srcset with two candidates
-      expect(vnode.children[6].data.attrs.srcset).to.equal(dataURL + ' 2x, ' + dataURL + ' 3x')
+      expect(vnode.children[4].data.attrs.srcset).to.equal(dataURL)
+      expect(vnode.children[6].data.attrs.srcset).to.equal(dataURL + ' 2x')
       // image tag with multiline srcset
-      expect(vnode.children[8].data.attrs.srcset).to.equal(dataURL + ' 2x, ' + dataURL + ' 3x')
+      expect(vnode.children[8].data.attrs.srcset).to.equal(dataURL + ', ' + dataURL + ' 2x')
+      expect(vnode.children[10].data.attrs.srcset).to.equal(dataURL + ' 2x, ' + dataURL)
+      expect(vnode.children[12].data.attrs.srcset).to.equal(dataURL + ' 2x, ' + dataURL + ' 3x')
+      expect(vnode.children[14].data.attrs.srcset).to.equal(dataURL + ', ' + dataURL + ' 2x, ' + dataURL + ' 3x')
+      expect(vnode.children[16].data.attrs.srcset).to.equal(dataURL + ' 2x, ' + dataURL + ' 3x')
 
       // style
       expect(includeDataURL(style)).to.equal(true)