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
06
World wide offices
12+
Years of Experience
05
Agile Coaches
14
Certified Scrum Masters
1000+
Clients projects
1458
Happy customers
- About Us
-
Services
-
AI/ML
- AI Consulting
- Generative AI
- AI Development
- Computer Vision
- NLP
- AI And ML Services
- LLM Development
- Adaptive AI
- ML Consulting
- Deep Learning
- Tensorflow Development
- ML Development
Artificial Intelligence
Machine Learning
-
Platforms
- Salesforce Customization
- Salesforce Implementation
- Salesforce Integration
- Salesforce Development
- Salesforce Consulting
- Salesforce Appexchange
- Salesforce CPQ
- Salesforce Data Migration
- Salesforce Managed Services
- Salesforce Staff Augmentation
- Salesforce App Development
- Salesforce Classic To Lightning Migration
- Salesforce Service Cloud
- Salesforce Marketing Cloud
- Salesforce Sales Cloud
- Salesforce Commerce Cloud
- Salesforce Financial Services Cloud
- Salesforce Support
- Microsoft Dynamics Consulting
- Dynamics 365 Implementation
- Dynamics 365 Integration
- Dynamics 365 Customization
- Microsoft Dynamics 365 Support
- SAP Consulting
Salesforce
Microsoft
SAP
- Industries
- Technologies
- Hire Talent
- Portfolio
- Contact Us
- book a 30 min call
June 27, 2023
VueJS Loading SVG File Depending on Variable
A package raw-loader can help you to get the desired result.
First Install it with `npm i raw-loader` and add its config in `webpack` as described below.
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.svg$/i,
use: 'raw-loader',
},
],
},
};
Now update your code like below
<template>
<div>
<div v-for="(rec, index) in stats" :key="index">
<div v-html="svgContent(rec)"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
stats: [
{ name: 'Leadership', icon: 'leadership'},
{ name: 'Innovation', icon: 'genius-ideas'},
]
}
},
methods: {
svgContent(src) {
return require(`!!raw-loader!@/assets/${src.icon}.svg`).default;
},
}
}
</script>
Now with the help of raw-loader file will import as string. This should fix your issue.
Support On Demand!
