为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

倚天杖 2023-10-04 15:09:31
我正在尝试根据循环中的内容加载保存在单独文件中的 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>>

  }

}


查看完整回答
反对 回复 2023-10-04
?
蝴蝶不菲

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


查看完整回答
反对 回复 2023-10-04
  • 2 回答
  • 0 关注
  • 133 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信