我正在尝试根据循环中的内容加载保存在单独文件中的 SVG。当页面加载时，我看到这个：嘿，这是我的代码：<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>这是数据函数，为了简洁起见，我省略了整个内容：data() { return { stats: [{name: "Leadership", percent: "75", top: "5", icon: "leadership"}, {name: "Innovation", percent: "25", icon: "genius-ideas"}] as Array<Record<string, string>> }}我怎样才能做到这一点？编辑 这是我的 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' }] } } }}编辑2似乎即使在安装 url-loader 并遵循建议之后，我仍然无法加载图像，这是我更新的 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, }, }, ], }] } } }}和我的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>
2 回答
GCT1015
TA贡献1827条经验 获得超4个赞
答案是使用像这样的动态组件
<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>>
}
}
蝴蝶不菲
TA贡献1810条经验 获得超4个赞
删除你的 svg 加载器
{
test: /\.svg$/,
loader: 'vue-svg-loader'
},
将 svg 添加到您的 url-loader
test: /\.(png|jpg|gif|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
esModule: false,
},
},
],
}
这通常是因为你的 webpack 加载器设置
尝试将esModule选项设置url-loader为false。
这应该可以解决你的问题。
您无需关注以下内容。
还有一个问题，即使你修复了加载器，你仍然无法加载它。
对于图像，您应该使用img标签来加载它。
<img :src=`require(...)`/>
v-html只会加载它的路径字符串。
- 2 回答
- 0 关注
- 133 浏览
添加回答
举报
0/150
提交
取消