VueJS загрузка SVG-файла в зависимости от переменной с использованием v- html, давая вместо этого [объектный модуль]

Question

Я пытаюсь загрузить SVG, сохраненные в отдельных файлах, в зависимости от содержимого в oop. Когда страница загружается, я вижу это:

Эй, вот мой код:

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

Как мне сделать sh это?

РЕДАКТИРОВАТЬ Вот мой 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-загрузчика и следуя советам, я все еще не могу загрузить образ, вот мой обновленный 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

удалите загрузчик svg

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

добавьте svg в ваш url-загрузчик

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

это нормально, потому что ваши настройки загрузчика webpack

попробуйте установить esModule опция в url-loader до false.

это должно решить вашу проблему.

---

вам не нужно следить за содержанием ниже.

и другая проблема, даже если вы исправили свой загрузчик, вы все равно не можете загрузить его.

для изображения, вы должны использовать тег img для его загрузки.

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

v-html загружает только строку пути.