Open alederzz opened 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"/>
<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" />
<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
/cdn-cgi/image/w=2,f=jpeg/
+1
For some strange reason only works NuxtPicture using the Cloudflare provider. When using NuxtImg it does not load the default configuration.
nuxt config
This works:
<NuxtPicture :src="https://img.example.com/my-image.png" sizes="100vw"/>
result
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:
When using NuxtImg it does not include the parameters
/cdn-cgi/image/w=2,f=jpeg/
in the generated url