Skip to content

Vite build generates srcset without space between source and resolution #3069

@nsursock

Description

@nsursock

Version

3.0.5

Reproduction link

https://github.com/nsursock/themusicstop-client

Steps to reproduce

Create a vite project, make a landing page with an srcset tag and try to deploy it on Netlify.
Example srcset :

<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
      <img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://source.unsplash.com/1680x1050" alt="Random music picture from Unsplash"
        srcset="https://source.unsplash.com/1024x768 1024w, https://source.unsplash.com/1920x1280 1920w" sizes="(min-width: 800px) 1920px, 100vw">
    </div>

What is expected?

The page should load a different version of the image if you're on mobile or desktop.

What is actually happening?

The image doesn't load because in the dist folder, the app.js file removed the space between image source and resolution (eg https://source.unsplash.com/1024x768/?music1024w instead of https://source.unsplash.com/1024x768/?music 1024w).


I was trying to optimise my website for speed and used an srcset tag.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions