Solve Vite / Vue3 public asset URLs base path not replaced

When using Vue3 / Vite, base URLs are wonderfully being replaced when setting the "base" setting in vite.config.js and referencing public assets (like images) like this:

<!-- image found at /public/img/my-public-image.jpg in the project directory -->
<img src="/img/my-public-image.jpg" />

<!-- Will be prefixed with the "base" configuration value on build by vite! -->

Sadly (but of course for good reasons) this does not work for dynamic sources:

const demoColorPictures = ref([
  {
    label: 'Orange',
    src: "/img/placeholder/frame_model_cross_section.svg",
    state: 'active'
  },
  {
    label: 'Blue',
    src: "/img/placeholder/frame_model_cross_section.svg",
  },
  {
    label: 'Yellow',
    src: "/img/placeholder/frame_model_cross_section.svg",
    addon: true,
  },
]);

To apply the base path, you need to use the URL() class like this:

const demoColorPictures = ref([
  {
    label: 'Orange',
    src: new URL('/img/placeholder/frame_model_cross_section.svg', import.meta.url).href,
    state: 'active'
  },
  {
    label: 'Blue',
    src: new URL('/img/placeholder/frame_model_cross_section.svg', import.meta.url).href,
  },
  {
    label: 'Yellow',
    src: new URL('/img/placeholder/frame_model_cross_section.svg', import.meta.url).href,
    addon: true,
  },
]);

For details see https://vitejs.dev/guide/assets.html