Download remotely hosted images and videos on build

[elringus]

When writing docs in md and inserting images or video I use links to an image/video hosting, like gyazo. This is just for the sake of simplicity: I don't want to spend time copying them into public folder, naming and otherwise maintaining them inside the project. It's all working fine on the surface, but there are some minor annoying issues, like page jumping while the assets are loading or anchor navigation not working properly due to page height changes while the assets being loaded.

With the vite plugin system, I guess it should be relatively simple to make a plugin, which will load such assets on build and embed them to the final package, so that they are preloaded before the page is rendered.

Before making such plugin myself, just wanted to make sure this feature is not already available in vite/vitepress or maybe a plugin like this already exist (wasn't able to google any results, though maybe I'm just looking for wrong keywords).

[userquin]

https://github.com/antfu/vite-plugin-remote-assets/blob/main/README.md

[elringus]

Brilliant, thank you!

[elringus]

Actually the suggested plugin didn't work for me, as the layout was still shifting and it had issues downloading many small files. So i've made a vite plugin that downloads remote media (images and video) assets, resolves their size and injects the width and height to the <img> and <video> tags, so that the layout doesn't shift at all when loading pages.

Here is the plugin: https://github.com/elringus/imgit