SVGs that are being bypassed are not being copied to the static folder
Greetings.
I have a setup running Nuxt, with Nuxt/Images and NetlifyCMS as a backend.
These are my nuxt.config.js folder settings:
dir: 'assets/uploads',
staticFilename: '[publicPath]/img/generated/[name]-[hash][ext]',
I expected the bypass to just copy the svgs over without transforming them. However it does not copy svgs at all. It leaves them in the assets/uploads folder, and in the frontend nuxt tries to access the svgs like so:
From the browser
<picture class="nuxt-img" data-v-81c5d7d4="" data-v-d11fa984="">
<!----> <img srcset="pay_01-01.svg" alt="">
</picture>
This results in the following route: http://localhost:3000/svgs/pay_01-01.svg, where it does not find a file, since none was copied over.
This is probably a really stupid config problem on my end, but I am at a loss here. It works with normal images just fine.
Same for me with image storage location in cloudinary and static generated website deployed to vercel.
Is there any workaround?
My workaround in an image.vue component will use jpg instead of svg.
Important Note: this works only, because I use Cloudinary and this amazing image service converts my SVG graphics into JPG images.
<template>
<div class="sm:m-2">
<div class="mx-auto bg-white border border-gray-200 rounded shadow-md">
<nuxt-picture
:title="title"
:alt="alt"
:src="getSrc"
sizes="xs:320px sm:640px md:768px: lg:1024px xl:1920px"
/>
</div>
<div v-if="caption != ''">
<div class="text-sm italic text-center text-gray-500">
{{ caption }}
</div>
</div>
</div>
</template>
<script>
export default {
props: {
src: {
type: String,
mandatory: true
},
alt: {
type: String,
mandatory: true
},
caption: {
type: String,
mandatory: false,
default: ''
},
title: {
type: String,
mandatory: false,
default: ''
}
},
computed: {
getSrc() {
// FIXME: workaround for issue in @nuxt/image (SVG files not copied to /static)
// https://github.com/nuxt/image/issues/367
return (this.src.replace('.svg','.jpg'))
}
}
}
</script>