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
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