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 加载器&nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test: /\.svg$/,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loader: 'vue-svg-loader'&nbsp; &nbsp; &nbsp; &nbsp; },将 svg 添加到您的 url-loader&nbsp; test: /\.(png|jpg|gif|svg)$/i,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; use: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loader: 'url-loader',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; options: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; esModule: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; }这通常是因为你的 webpack 加载器设置尝试将esModule选项设置url-loader为false。这应该可以解决你的问题。您无需关注以下内容。还有一个问题，即使你修复了加载器，你仍然无法加载它。对于图像，您应该使用img标签来加载它。<img :src=`require(...)`/>v-html只会加载它的路径字符串。