fix: rendering MDX images in development

[ouuan]

Background 📜

The id looks like composables/mdxComponents.js?v=a217f6bd since around Vite v3.1.

This caused all images to be corrupted in dev mode.

The Fix 🔨

Use includes instead of endsWith to check the id.

But I'm wondering why not use a remark plugin instead of the Vite plugin 🤔 (I haven't tried writing a remark plugin for <Picture> yet, maybe it simply doesn't work for some reason.)

[nx-cloud[bot]]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 8ef38364e126346ef94c6c0d3952c63e2e5c3450. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 3 targets

- [`nx run-many --target=build --all --exclude docs --exclude vue-blog`](https://cloud.nx.app/runs/K2JeohfCwZ) - [`nx run-many --target=lint --all`](https://cloud.nx.app/runs/7tdaLXiZQf) - [`nx run-many --target=build --all --exclude docs --exclude vue-blog`](https://cloud.nx.app/runs/MoAAPYphvO)

---

Sent with 💌 from NxCloud.

[ElMassimo]

Thanks for the fix! 😃

wondering why not use a remark plugin instead of the Vite plugin

In this case we are not modifying markdown documents, instead we inject it in the global registry used by MDX for shortcodes.