nuxt / image

Plug-and-play image optimization for Nuxt applications.
https://image.nuxt.com
MIT License
1.35k stars 271 forks source link

NuxtImg incomplete url using Cloudflare provider #1080

Open alederzz opened 1 year ago

alederzz commented 1 year ago

For some strange reason only works NuxtPicture using the Cloudflare provider. When using NuxtImg it does not load the default configuration.

  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxt/image": "npm:@nuxt/image-edge@latest",
    "@nuxtjs/apollo": "^5.0.0-alpha.6",
    "@nuxtjs/device": "^3.1.0",
    "@nuxtjs/google-fonts": "^3.0.1",
    "@types/node": "^18",
    "autoprefixer": "^10.4.14",
    "nuxt": "^3.8.0",
    "postcss": "^8.4.24",
    "tailwindcss": "^3.3.2"
  }

nuxt config

image: {
    domains: ['img.example.com'],
    provider: 'cloudflare',
    cloudflare: {
      baseURL: 'https://example.com'
   },
},

This works: <NuxtPicture :src="https://img.example.com/my-image.png" sizes="100vw"/>

result

<picture>
  <source type="image/webp" sizes="100vw"
    srcset="https://example.com/cdn-cgi/image/w=1,f=webp/https://img.example.com/my-image.png 1w, https://example.com/cdn-cgi/image/w=2,f=webp/https://img.example.com/my-image.png 2w">
  <img onerror="this.setAttribute('data-error', 1)" data-nuxt-pic=""
    src="https://example.com/cdn-cgi/image/w=2,f=jpeg/https://img.example.com/my-image.png"
    sizes="100vw"
    srcset="https://example.com/cdn-cgi/image/w=1,f=jpeg/https://img.example.com/my-image.png 1w, https://example.com/cdn-cgi/image/w=2,f=jpeg/https://img.example.com/my-image.png 2w">
</picture>

This not works (error 404): <NuxtImg src="https://img.example.com/my-image.png" /> or <NuxtImg provider="cloudflare" src="https://img.example.com/my-image.png" />

result:

<img src="https://example.com/https://img.example.com/my-image.png" onerror="this.setAttribute('data-error', 1)" 
data-nuxt-img=""  srcset="https://example.com/https://img.example.com/my-image.png 1x, https://example.com/https://img.example.com/my-image.png 2x" data-error="1">

When using NuxtImg it does not include the parameters /cdn-cgi/image/w=2,f=jpeg/ in the generated url

tevfiksirin commented 1 year ago

+1