image icon indicating copy to clipboard operation
image copied to clipboard

SVGs that are being bypassed are not being copied to the static folder

Open ChristopherCapito opened this issue 4 years ago • 2 comments

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.

ChristopherCapito avatar Jul 12 '21 12:07 ChristopherCapito

Same for me with image storage location in cloudinary and static generated website deployed to vercel.

Is there any workaround?

michael-hillmann avatar Sep 11 '21 11:09 michael-hillmann

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>

michael-hillmann avatar Oct 16 '21 15:10 michael-hillmann