我正在嘗試根據(jù)循環(huán)中的內(nèi)容加載保存在單獨(dú)文件中的 SVG。當(dāng)頁(yè)面加載時(shí)，我看到這個(gè)：嘿，這是我的代碼：<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>這是數(shù)據(jù)函數(shù)，為了簡(jiǎn)潔起見，我省略了整個(gè)內(nèi)容：data() { return { stats: [{name: "Leadership", percent: "75", top: "5", icon: "leadership"}, {name: "Innovation", percent: "25", icon: "genius-ideas"}] as Array<Record<string, string>> }}我怎樣才能做到這一點(diǎn)？編輯 這是我的 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 并遵循建議之后，我仍然無(wú)法加載圖像，這是我更新的 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貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超4個(gè)贊
答案是使用像這樣的動(dòng)態(tài)組件
<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貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超4個(gè)贊
刪除你的 svg 加載器
{
test: /\.svg$/,
loader: 'vue-svg-loader'
},
將 svg 添加到您的 url-loader
test: /\.(png|jpg|gif|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
esModule: false,
},
},
],
}
這通常是因?yàn)槟愕?webpack 加載器設(shè)置
嘗試將esModule選項(xiàng)設(shè)置url-loader為false。
這應(yīng)該可以解決你的問(wèn)題。
您無(wú)需關(guān)注以下內(nèi)容。
還有一個(gè)問(wèn)題，即使你修復(fù)了加載器，你仍然無(wú)法加載它。
對(duì)于圖像，您應(yīng)該使用img標(biāo)簽來(lái)加載它。
<img :src=`require(...)`/>
v-html只會(huì)加載它的路徑字符串。
- 2 回答
- 0 關(guān)注
- 270 瀏覽
添加回答
舉報(bào)
0/150
提交
取消