I was trying to use to embed the svg picture but it does not show anything. I looked at some other threads and it was suggested to add type="image/svg+xml", however, it did not solve the,vue.js,svg"/>

时间戳

首页 > 解决方案 > 使用 to embed svg but doesn't show anything

I was trying to use to embed the svg picture but it does not show anything. I looked at some other threads and it was suggested to add type="image/svg+xml", however, it did not solve the

vue.js - 使用 to embed svg but doesn't show anything

I was trying to use to embed the svg picture but it does not show anything. I looked at some other threads and it was suggested to add type="image/svg+xml", however, it did not solve the

问题描述

I was trying to use to embed the svg picture but it does not show anything. I looked at some other threads and it was suggested to add type="image/svg+xml", however, it did not solve the issue. When I am trying to look at the DOM for some reason it seems to create an endless loop. I attached the picture

This is the compononent 

<template>

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

        </object>
    </div>

</template>

This is the 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

How can I populate an encrypted PDF using python?

so I am trying to quicken my workflow by auto populating a pdf using a python library (preferred, all languages accepted). The pdf is from another corporation (that we work with) and is encrypted with 128-bit AES encryption as well as created with:Adobe LiveCycle Designer ES 10.0, I can manually input information into the document and even submit it to them using it. I have tried so many libraries, the last being pdfrw, but all of them required the file to be decrypted which would make the file lose its signatures they require (I have contacted them before due to a similar issue, but they require them signed or else they wont accept it). Of course the password is not empty (just in case you were wondering). Does anyone have ant ideas on how to solve this issue? Thank you!

Tried Using multiple python libraries, most notably pdfrw.

标签： vue.jssvg

解决方案

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

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

注意：如果你不使用eslint作为 linter，你可以删除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添加一条规则，以说明如何处理对象中的数据属性

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

// 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：替换默认loader，使用svg作为vue组件

其他选项是使用vue-svg-loader。此加载器内联 SVG，使您能够使用 css 修改它们。还可以使用SVGO优化您的文件

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

推荐阅读