1

I'm trying to display raw svg in the Vue component using raw-loader. However, the svg is always inlined no matter what I do. Here's my code:

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

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

I understand this is due to vue-cli webpack's config webpack.base.conf.js:

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

I've tried to add a new loader rule to load raw files if I append ?raw to them but that does not work either:

  {
    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',
  },

I'm using:

  • vue-cli@2.9.2
  • vue@2.5.2
Johnny Vietnam
  • 196
  • 1
  • 6
  • Have you tried changing the order of those two loaders? – acdcjunior Mar 13 '18 at 03:19
  • If that doesn't work, try changing the `url-loader` to `test: /\.(png|jpe?g|gif|svg)(\?(?!raw).*)?$/,` and try to use `?raw` back again. – acdcjunior Mar 13 '18 at 03:21
  • @acdcjunior Thanks, none of these work. Switching the order was my first try actually. It seems to me that the loader does not care about the query string... so if you require file.svg or file.svg?something, it always looks at the file.svg ... – Johnny Vietnam Mar 13 '18 at 04:55

0 Answers0