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