search

ElMassimo / iles

🏝 The joyful site generator
https://iles.pages.dev
MIT License
1.08k stars 31 forks source link

Relative paths for srcset not working #35

Closed HerrBertling closed 2 years ago

HerrBertling commented 2 years ago

Description 📖

Hey :wave: 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 commented 2 years ago

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 commented 2 years ago

@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:

ElMassimo commented 2 years ago

@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:

HerrBertling commented 2 years ago

Wow. Thanks for the answers ❤️