banthagroup / fslightbox-vue

Basic version of Fullscreen Lightbox for Vue.js. Website: https://fslightbox.com/vue
MIT License
41 stars 3 forks source link

srcset and size does not work #49

Closed Kumzy closed 2 years ago

Kumzy commented 2 years ago

When setting custom attributes for srcset and sizes, the source image is used instead of the correct size.

Using nuxt 2.15.3

<FsLightbox
          :toggler="toggler"
          :slide="slide"
          type="image"
          :sources="[require('@/static/box/box2.jpg'), require('@/static/box/Box-09-1440.jpg'), require('@/static/box/box1.jpg')]"
          :custom-attributes="[
            {
              alt: 'Example first image description'
            },
            {
              alt: 'Example second image description',
              srcset: require('@/static/box/Box-09-480.jpg') + ' 480w, ' + require('@/static/box/Box-09-576.jpg') + ' 576w',
              sizes: '(max-width: 640px) 480w',
            }
          ]"
        />

HTML output:

<img src="/_nuxt/static/box/Box-09-1440.jpg" alt="Example second image description" srcset="/_nuxt/static/box/Box-09-480.jpg 480w, /_nuxt/static/box/Box-09-576.jpg 576w" sizes="(max-width: 640px) 480w" class="fslightbox-source fslightbox-opacity-1" style="width: 375px; height: 249.335px;">