Issue
I'm trying to load SVGs saved in separate files depending on the content in a loop. When the page loads, I see this:
Hey, Here's my code:
<div
v-for="(rec, index) in stats"
:key="index"
>
<div class="iconForeground align-self-center" v-html="require(`../../../assets/svg/dashboard/attributes/${rec.icon}.svg`)">
</div>
</div>
Here's the data function, I've omitted the whole thing for brevity:
data() {
return {
stats: [{name: "Leadership", percent: "75", top: "5", icon: "leadership"},
{name: "Innovation", percent: "25", icon: "genius-ideas"}] as Array<Record<string, string>>
}
}
How can I accomplish this?
EDIT Here's my vue.config.js:
const path = require("path");
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: [
"./src/styles/global.scss"
]
},
configureWebpack: {
module: {
rules: [{
test: /\.svg$/,
loader: 'vue-svg-loader'
}]
}
}
}
}
EDIT 2 It seems even after installing url-loader and following the advice, I still cannot load the image, here's my updated vue.config.js:
const path = require("path");
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: [
"./src/styles/global.scss"
]
},
configureWebpack: {
module: {
rules: [
{
test: /\.svg$/,
loader: 'vue-svg-loader'
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
esModule: false,
},
},
],
}]
}
}
}
}
and my html:
<div class="d-flex flex-column justify-content-center" :style="{marginRight: '24px'}">
<div class="purpleDot"></div>
<div class="iconForeground align-self-center">
<img :src="require(`../../../assets/svg/dashboard/attributes/${rec.icon}.svg`)" />
</div>
</div>
Solution
The answer is to use dynamic components such as this
<template>
div
v-for="(m, i) in modules"
:key="i">
<component :is="m.image"></component>
</div>
</template>
import PraiseIcon from "@/assets/svg/navigation-bar/Praise-Icon.svg";
components: {
'Praise-Icon': PraiseIcon
},
data() {
return {
modules: [
{
name: "Praise",
image: "Praise-Icon",
}
] as Array<Record<string, string>>
}
}
Answered By - Ayudh
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.