Question

我试图用来嵌入svg图片，但是它什么也没显示。我查看了其他一些线程，建议添加type =“ image / svg + xml”，但是它不能解决问题。当我出于某种原因试图查看DOM时，似乎会创建一个无限循环。我附上了图片

这是组件

<template>

    <div class="logo">
        <object type="image/svg+xml" data="logo.svg">

        </object>
    </div>

</template>

这是app.vue

template>
  <div id="app">
      <Demo></Demo>
  </div>
</template>

<script>
import Demo from './components/Demo.vue'

export default {
  name: 'app',
  components: {
    Demo
  }
}
</script>
```[![Snapshot][1]][1]


  [1]: https://i.stack.imgur.com/Q6ipO.png

Answer 1

值得检查的是，您没有隐藏对象标签的CSS规则。否则，这似乎是正确的。您可能需要检查路径，并确保可以到达图像。我假设您的文件名是虚拟的，但尝试使用绝对路径。并确保您可以点击路径并在浏览器中查看图片。

Answer 2

之所以发生这种情况，是因为 vue-loader 不能识别任何属性中的路径。默认情况下，只需识别以下内容即可：https://vue-loader.vuejs.org/options.html#transformasseturls

所以，有3种可能的解决方案

注意：如果您不使用 eslint 作为棉绒，则可以删除 eslint 注释

1：绑定到您的图片的路线

首先将下一个变量添加到组件中的数据

data() {
    return {
      // eslint-disable-next-line global-require
      mySvg: require('../assets/logo.svg'),
    };
  },

接下来修改您的模板

<object type="image/svg+xml" :data="mySvg">

2：添加 vue-loader 规则

如果不想绑定每个svg图像，则可以向 vue-loader 添加一条规则，以说明如何处理 data 属性。 object

转到您的 webpack 配置文件，如果您使用 vue-cli 3.x创建了项目，则必须在根目录中创建一个vue.config.js文件（与 package.json 相同的级别）

// vue.config.js

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap((options) => {
        // eslint-disable-next-line no-param-reassign
        options.transformAssetUrls = {
          object: 'data',
        };

        return options;
      });
  },
};

如果要检查是否已添加配置，请执行vue inspect > webpack.config并期望看到类似这样的内容（在webpack.config内部）：

    {
        loader: 'vue-loader',
        options: {
          ...
          transformAssetUrls: {
            object: 'data'
          }
        }
      }

更多信息：https://cli.vuejs.org/guide/webpack.html#working-with-webpack

3：替换默认的加载程序并将svg用作vue组件

其他选项是使用 vue-svg-loader 。该加载器内联SVG，使您可以使用CSS修改它们。还可以使用 SVGO

优化文件

查看更多：https://vue-svg-loader.js.org/#vue-cli

使用<object>嵌入svg但不显示任何内容

2 个答案: