How to load a static content in index.html-CodePudding

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

CodePudding user response：

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)

CodePudding user response：

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