1

我正在尝试使用 raw-loader 在 Vue 组件中显示原始 svg。但是，无论我做什么，svg 总是内联的。这是我的代码：

<template>
    <div v-html="svg"></div>
</template>

<script>
import svg from 'raw-loader!@/assets/images/image.svg';
export default {
    data () {
        return {
              svg
        }
    }
};
</script>

我知道这是由于vue-cliwebpack 的配置webpack.base.conf.js：

  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  },

如果我附加?raw到原始文件，我尝试添加一个新的加载器规则来加载它们，但这也不起作用：

  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  },
  {
    test: /\.(png|jpe?g|gif|svg)(\?raw)$/,
    loader: 'raw-loader',
  },

我在用着：

  • vue-cli@2.9.2
  • vue@2.5.2
4

0 回答 0