Markdown image rendering seems to produce invalid HTML (empty attribute srcset="")

[vadimkantorov]

Checking https://russie-libertes.org/media (renders a list of social network logos by rendering markdown with remark Astro pipeline) at https://validator.w3.org/nu/

Is it a known issue? Is it possible to fix this?

[delucis]

Might be a bug? Can you share a reproduction?

[vadimkantorov]

I'm rendering it with my custom Astro component: <Lmarkdown path="social.md" />

social.md:

- [![LinkedIn](images/social/linkedin.svg)](https://linkedin.com/company/russie-libertes)

LocalizedMarkdown.astro (I'm doing this as built-in i18n doesn't support mypage.fr.md flat dir file naming style out of the box):

---
import { getCollection, render } from 'astro:content';
import { getCurrentLocale, getMarkdownEntryForLocale } from '../scripts/utils.js';

const currentLocale = getCurrentLocale(Astro);
const { dir, path } = Astro.props;
const collection = await getCollection('main');
const Markdown = await render(getMarkdownEntryForLocale(collection, currentLocale, path));
---

<Markdown.Content />

where getMarkdownEntryForLocale simply filters through the passed collection

It seems to me that Astro (v7.0.9)'s remark image pipeline simply always produces srcset="" which wrongs the strict validation

[jx-grxf]

Yep, looks like a bug. I made a tiny content collection with the same Markdown image and could reproduce it in both Astro 7.0.9 and 7.2.0, so it doesn't seem tied to your custom component.

With:

![LinkedIn](./images/linkedin.svg)

the generated HTML contains:

<img
  alt="LinkedIn"
  src="/_astro/linkedin....svg"
  width="24"
  height="24"
  srcset=""
>

It seems to happen when a local SVG goes through Astro's Markdown image pipeline. Since there are no responsive variants for the SVG, I'd expect srcset to be left out instead of rendered as an empty attribute.

As a workaround, I moved the SVG to public/images/ and used an absolute path:

![LinkedIn](/images/linkedin.svg)

That renders without the empty srcset. So using public/ for these small icons should work until this is fixed.

Johannes

[vadimkantorov]

Would you file the bug in the main tracker?

[florian-lefebvre]

Yes feel free to open an issue with a minimal reproduction https://github.com/withastro/astro/issues

[jx-grxf]

Filed it: withastro/astro#17871

Minimal reproduction: https://github.com/jx-grxf/astro-markdown-srcset-repro

One correction to what I wrote above: it isn't SVG-specific. A 2000×1000 PNG going through the same content collection gets srcset="" as well, so it affects every Markdown image rendered through the content layer, not just images without responsive variants of a particular type.

The same Markdown placed in src/pages/legacy.md renders without the attribute. That path (vite-plugin-markdown/images.ts) only sets srcset when srcSet.values.length > 0, while content/runtime.ts sets it unconditionally and the serializer keeps empty strings on purpose. Details are in the issue.

The public/ workaround still applies in the meantime.

[vadimkantorov]

After update to 7.2.10 which includes the fix, validator errors disappeared! Thanks!