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
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" />