Javascript VueJS根据变量使用v-html加载SVG文件，改为提供[object Module]

我正在尝试加载保存在不同文件中的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>

编辑2即使在安装了url加载程序并遵循建议后，我仍然无法加载图像，以下是我更新的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'
        }]
      }
    }
  }
}

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>

删除svg加载程序

   {
          test: /\.svg$/,
          loader: 'vue-svg-loader'
        },

将svg添加到url加载器

  test: /\.(png|jpg|gif|svg)$/i,
          use: [
            {
              loader: 'url-loader',
              options: {
                esModule: false,
              },
            },
          ],
        }

这通常是因为您的网页加载程序设置

尝试将

url加载程序中的
esModule
选项设置为
false

这将解决您的问题


您不需要遵循下面的内容

还有一个问题，即使你修复了你的加载程序，你仍然无法加载它

对于图像，您应该使用
img
标记来加载它

<img :src=`require(...)`/>



v-html
将只加载其路径字符串。
答案是使用如下组件

<template>
  div
    v-for="(m, i) in modules"
    :key="i">
    <component :is="m.image"></component>
  </div>
</template>

但我想将其作为svg加载，以便进一步自定义它。我不想将其作为图像加载。按照您的方式，您也不是将其作为svg加载，而是将其作为字符串加载。无论如何，您只需设置url加载程序选项即可解决问题。不需要使用IMG标签。我已经发布了我的VU.CONT.JS，你能告诉我应该在哪里添加你所声明的属性吗？@ AyUdh检查这个文档，我看到了席席燮：
<template>
  div
    v-for="(m, i) in modules"
    :key="i">
    <component :is="m.image"></component>
  </div>
</template>

components: {
  'Praise-Icon': PraiseIcon
},
data() {
  return {
    modules: [
        {
          name: "Praise",
          image: "Praise-Icon",
        }
      ] as Array<Record<string, string>>
  }
}