nuxt2: unable to load SVGs from S3

beshur commented 7 months ago

Hi.

I am using @nuxt/image for our nuxt2 project. However it doesn't seem to work for SVGs hosted on a remote server. Do I need some other plugin to make it work?

github-actions[bot] commented 7 months ago

Would you be able to provide a reproduction? 🙏

More info

### Why do I need to provide a reproduction? Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making. ### What will happen? If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect. If `needs reproduction` labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it. ### How can I create a reproduction? We have a template for starting with a minimal reproduction: 👉 https://stackblitz.com/github/nuxt/image/tree/main/example A public GitHub repository is also perfect. 👌 Please ensure that the reproduction is as **minimal** as possible. See more details [in our guide](https://nuxt.com/docs/community/reporting-bugs/#create-a-minimal-reproduction). You might also find these other articles interesting and/or helpful: - [The Importance of Reproductions](https://antfu.me/posts/why-reproductions-are-required) - [How to Generate a Minimal, Complete, and Verifiable Example](https://stackoverflow.com/help/mcve)

beshur commented 7 months ago

Okay, it works by passing the whole URL to the nuxt-image, but is it possible to do it in a simple way without a custom provider?

<template>
  <nuxt-img
    :src="svgRaw"
    class="icon"
    v-on="$listeners"
  />
</template>

<script>
export default {
  name: 'Icon',

  props: {
    image: {
      type: String,
      default: null
    }
  },

  computed: {
    svgRaw () {
      return `${process.env.S3_BUCKET_URL}frontend-assets/glyphs/${this.image}.svg`
    }
  }
}
</script>

beshur commented 2 months ago

the purpose of nuxt-img here is to being able to prerender the page with SVGs during build-time, and the resource is away, so it doesn't work, right?

nuxt / image

nuxt2: unable to load SVGs from S3 #1319