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

Posted 2023-02-22

【中文标题】VueJS根据for循环中的变量加载SVG文件，使用v-html给出[object Module]

【英文标题】：VueJS loading SVG file depending on variable in for loop using v-html giving [object Module] instead

【发布时间】：2020-07-03 14:21:05

【问题描述】：

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

【参考方案1】：

答案是使用dynamic这样的组件

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

【参考方案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 加载器设置

尝试将url-loader 中的esModule 选项设置为false。

这应该可以解决您的问题。

---

您无需关注以下内容。

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

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

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

v-html 只会加载它的路径字符串。

【讨论】：

但我想将其加载为 svg，以便进一步自定义。我不想将其加载为图像。

以您的方式，您也不是将其加载为 svg，而是将其加载为字符串。无论如何，您可以设置 url-loader 选项来解决您的问题。不需要使用 img 标签。

我已经发布了我的 vue.config.js，你能指导我在哪里添加你所说的属性吗？

@Ayudh 检查此文档webpack.js.org/loaders/url-loader

我明白了，xièxie :)