Relative paths for srcset not working

[HerrBertling]

• I have read the [troubleshooting section] before opening an issue.
• I have tried upgrading iles and vite.

Description 📖

Hey 👋 When using a picture element, it seems as if the src for the img is resolved correctly, but the srcset attribute for different source tags is not resolved when using ~ or @.

Reproduction 🐞

<picture>
    <source
      srcset="
        @/assets/images/some_image_2x.png 2x,
        @/assets/images/some_image.png
      "
      type="image/png"
    />
    <source
      srcset="
        @/assets/images/some_image_2x.webp 2x,
        @/assets/images/some_image.webp
      "
      type="image/webp"
    />
    <img
      loading="lazy"
      src="@/assets/images/some_image.png"
    />
  </picture>

This will result in this code, at least in dev mode (haven't checked the build but my guess is that it's incorrect there as well):

<picture>
    <source
      srcset="
        /src/components/@/assets/images/some_image.png 2x,
        /src/components/@/assets/images/some_image.png"
      type="image/png"
    >
    <source
      srcset="
        /src/components/@/assets/images/some_image_2x.webp 2x,
        /src/components/@/assets/images/some_image.webp"
      type="image/webp"
    >
    <img
      loading="lazy"
      src="/src/assets/images/some_image.png"
    >
  </picture>

Dependencies Info

iles v0.6.4 vite v2.6.14

[ElMassimo]

Hi Markus!

îles does not alter how @vitejs/plugin-vue extracts imports or vite perform import analysis.

Since it works for src in img, it's likely that relative import detection in srcset has a bug in Vue.

Please visit the Vue Land Discord to ask about this kind of usage, or open an issue in Vue 😃

---

In the meantime, you can manually import the image sources and bind them:

import someImageSrc from '@/assets/images/some_image.png'

<source :srcset="someImage" type="image/png">

[ElMassimo]

@HerrBertling About your question about global CSS, the best approach is to import it in src/app.ts. Plan to document this soon in a Recipes section in the docs.

See the following examples:

• Docs
• The Vue Point

[ElMassimo]

@HerrBertling This is the relevant code regarding srcset transforms in Vue.

Looks like there are several PRs open in Vue to patch this or similar problems:

• fix(compiler-sfc) :also hoist srcset when explicit base vuejs/core#4835
• fix(compiler-sfc): Keep the url logic of src and srcset mostly consistent vuejs/core#4834
• fix(compiler-sfc): should generate the correct srcset vuejs/core#3957

[HerrBertling]

Wow. Thanks for the answers ❤️