'How to load a static content in index.html

I was using vue-cli with webpack for my project and was loading an image in index.html like this // index.html

<html>
    ...
    <style>
        .tag1 { background-image: url('<%= require('@/assets/icons/a123.svg') %>'); }
    </style>
    ...
</html>

how to load the icon in vite based index.html file? I tried url(/assets/icons/a123.svg) but its throwing 404

javascript vue.js vite

Solution 1:^[1]

You can create function, check vite docs

const useImage = ((url) => {
  return new URL(`/src/${url}`, import.meta.url).href;
});

and create global property in main.js:

app.config.globalProperties.$image = useImage;

then use it like:

$image(imageUrl)

Move the svg file to /public folder and then u can access it like <img src="/a123.svg" />

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Solution	Source
Solution 1	Nikola Pavicevic
Solution 2	FarazShuja