Vue CLI 3 – Use Background Image in Style Tag

Keeping in mind asset resolving rules), here’s how to ensure your SVG background image is displayed correctly in your Vue component:

Use the Correct Path: Since you want to use Webpack’s module resolution, you should prefix your URL with `~` to ensure it gets processed correctly. Update your SCSS like this:

<style scoped lang="scss">
.container {
    height: 40px;
    width: 40px;
    background-image: url('~@/assets/image.svg');
    background-size: cover; // Adjust as needed
    background-repeat: no-repeat;
    border: 1px solid red; // For visibility while testing
}
</style>