Version

3.1.0-beta.6 Edit: Still an issue as of 3.2.30

Reproduction link

https://github.com/lukewarlow/vue-server-render-bug

Steps to reproduce

Clone the git repository. Run npm install and then npm run generate. This will generate a dist/static/index.html file. (One is already generated)

What is expected?

The generated html file should have two picture elements which point to different images in both the source element and the img element. As seen in the source file at src/views/Home.vue.

<source
  media="(prefers-color-scheme: dark)"
  type="image/svg+xml"
  srcset="/img/code-white.svg" />

What is actually happening?

In dist/static/index.html you will be able to see that the img elements have different src values which is correct. But the source elements both have the same srcset value which is incorrect.

<source
  media="(prefers-color-scheme: dark)"
  type="image/svg+xml"
  srcset="/img/generic-logo-white.svg" />

This is https://github.com/vuejs/vue-next/issues/3536 reopened as the commit to fix it hasn't worked. Apologies if I'm doing something wrong in my SSR code, but I do believe this is a bug.

I updated the expected and actually happening based on what you explained. Edit it if that's not what you meant

I hate leaving comments like this but this bug is blocking me migrating a few sites over to SSR. I see there's a PR that's been open a while to address this issue, is there anything I can do to get that reviewed?

@lukewarlow Let's pushing this. ping @yyx990803

Just tested on latest Vue and it's still reproducible.