VueJS 根据 for 循环中的变量加载 SVG 文件，使用 v-html 给出

Question

我正在尝试根据循环中的内容加载保存在单独文件中的 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>

Answer 1

答案是使用像这样的动态组件

<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>>

  }

}

Answer 2

删除你的 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只会加载它的路径字符串。