Usually, Nuxt utilizes url-loader
to encode and embed images smaller than 1kb as base64:
https://nuxtjs.org/docs/2.x/directory-structure/assets/#webpack
The default Nuxt configuration snippet can be found here:
https://github.com/nuxt/nuxt.js/blob/dev/packages/webpack/src/config/base.js#L383
I am looking to turn off this base64 encoding specifically for SVGs.
This is how I include SVGs in my template:
<img
:src="require(`@/assets/images/${src}`)"
/>
Below is the approach I tried in my custom Nuxt config:
export default {
build: {
extend(config, { isDev }) {
config.module.rules = [
{
test: /\.svg$/i,
use: [{
loader: 'url-loader',
options: {
limit: false,
name: '[path][name].[ext]',
},
}],
},
...config.module.rules,
];
},
},
}
As a result, images do not display on my development server:
https://i.sstatic.net/PaVsN.jpg
No build errors are reported. How should I correctly disable the inline embedding of SVGs?
Edit:
Since I did not receive any responses, I resorted to a cumbersome method of iterating through all existing rules and explicitly removing svg
from them:
export default {
build: {
extend(config, { isDev }) {
config.module.rules = config.module.rules.map(rule => {
if (rule.test && rule.test.toString().indexOf('svg') > -1) {
const regex = rule.test;
rule.test = new RegExp(regex.source.replace('|svg', ''), regex.flags);
}
return rule;
});
config.module.rules = [
{
test: /\.svg$/i,
use: [{
loader: 'url-loader',
options: {
limit: false,
name: '[path][name].[ext]',
},
}],
},
...config.module.rules,
];
},
},
}