Bacancy Technology

Bacancy Technology represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

World wide offices

12+

Years of Experience

Agile Coaches

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

Vue

October 3, 2024

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>