我正在嘗試根據循環中的內容加載保存在單獨文件中的 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 關注
- 272 瀏覽
添加回答
舉報
0/150
提交
取消