Comments (11)
@scottyzen can you share your nuxt config (part related to images configuration)?
I used same one as in #1330 (comment) with just provider
commented out to use default Netlify Image CDN and that just worked - but it also only escaped .
dots in domain I provided and didn't need to do anything else. It's possible that that current code is not sufficient for every input, so was just wondering what example input it could be that might not work (and so that I could try to test it on my end as well to confirm)
from image.
Hi @scottyzen I attempted to reproduce with following
nuxt.config.ts
:
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: true },
modules: ["@nuxt/image"],
image: {
// force ipx, as otherwise it would default to using Netlify Image CDN (which probably is better to use, but issue is about ipx)
provider: "ipx",
domains: ["secure.woonuxt.com"],
},
});
and app.vue
:
<template>
<div>
<NuxtImg src="https://secure.woonuxt.com/wp-content/uploads/2021/10/T_1_front-500x500.jpg" />
</div>
</template>
however I was unable reproduce the problem, as things seems to work (with double //
after https:
in source image url part of pathname) - just copying pathname from your paths you reported to my deploy is working (as I didn't use any modifiers in my snippet above):
- works fine - https://main--soft-basbousa-ff9ba7.netlify.app/_ipx/f_webp&fit_outside&s_440x496/https://secure.woonuxt.com/wp-content/uploads/2021/10/T_1_front-500x500.jpg
- 404s π€ https://v3.woonuxt.com/_ipx/f_webp&fit_outside&s_440x496/https://secure.woonuxt.com/wp-content/uploads/2021/10/T_1_front-500x500.jpg
I've used freshly created project, so maybe it's matter of upgrading your dependencies - it seems like with everything being latest
things do work with ipx on Netlify unless there is more variables that cause those paths to 404 on your site?
Regardless of above, I would suggest using Netlify Image CDN (over ipx) when deploying to Netlify (it should be default unless you are forcing ipx) as it's better suited to run image transformation than running ipx/sharp on general purpose lambdas
from image.
Is scottyzen/woonuxt#157 where you are doing that exploration?
If it is then I noticed that if I use
nuxt generate
(which is what is used now on the site I linked) - it doesn't seem to automatically configure Netlify Image CDN, but it does whennuxt build
is used. This is a bit unknown to me, but when doingnuxt generate
it seems likestatic
Nitro preset is forced and so code added in Nitro to support automatic configuration ( unjs/nitro#2264 ) is not being executed? I didn't do detailed debugging on this, but this seems plausible why you still have to usenetlify.toml
to register remote image domains whennuxt generate
is used?
@pieh Yeah, I'm using nuxt generate
from image.
cc: @pi0
from image.
Hi @pieh
Thanks for looking into it. I ended up having to go with Netlify's image CDN, for the time being anyway. But even with that I still had to update the netlify.toml
file too, for example:
[images]
remote_images = ["https://secure.woonuxt.com/.*"]
Passing the domain into the NuxtImg settings isn't enough to get them working. π€
from image.
Currently want to deploy to netlify as well.
The used images are located in the public
dir in my case.
Locally everything works fine.
Deploying on netlify the _ipx
folder is missing and therefore the used images are not shown.
Changing the deploy settings build command to nuxt generate
"fixes" the problem (_ipx
folder is present).
Anyway this should not be the solution.
from image.
But even with that I still had to update the
netlify.toml
file too, for example:[images] remote_images = ["https://secure.woonuxt.com/.*"]
Passing the domain into the NuxtImg settings isn't enough to get them working. π€
Hmmm, this should be automatic since #1287 (with my reproduction attempt I didn't need to do that manually, I just declared domains in nuxt.config.ts#image.domains
and changes from previously referenced pull request handled configuring Netfliy automatically for me.
from image.
Hi, @pieh,
I just had read of the Netlify docs about the remote-path and it say's that you only need to double-escape regex in the netlify.toml
file. So I wonder if the below change to the remote_images property would work since it's the config.json
file that we are targeting?
nuxt.options.nitro = defu(nuxt.options.nitro, {
netlify: {
images: {
// remote_images: moduleOptions.domains.map(domain => `https?:\\/\\/${domain.replaceAll('.', '\\.')}\\/.*`)
remote_images: moduleOptions.domains.map((domain) => `https://${domain.replace(/(^\w+:|^)\/\//, '')}/.*`),
}
}
from image.
Hi @pieh ,
Sure, I've tried almost every combination of settings. Here's what I have now:
image: {
provider: 'netlify',
domains: ['secure.woonuxt.com'],
},
As soon as I comment out the following in my netlify.toml file it breaks:
# [images]
# remote_images = ["https://secure.woonuxt.com/.*"]
So at the moment, for me anyway. I need to set the remote_images in the .toml file for the images to work. Once that's set either provider ( netlify or ipx ) will work.
from image.
Is scottyzen/woonuxt#157 where you are doing that exploration?
If it is then I noticed that if I use nuxt generate
(which is what is used now on the site I linked) - it doesn't seem to automatically configure Netlify Image CDN, but it does when nuxt build
is used. This is a bit unknown to me, but when doing nuxt generate
it seems like static
Nitro preset is forced and so code added in Nitro to support automatic configuration ( unjs/nitro#2264 ) is not being executed? I didn't do detailed debugging on this, but this seems plausible why you still have to use netlify.toml
to register remote image domains when nuxt generate
is used?
from image.
https://github.com/unjs/nitro/blob/346a49508b58b747f164ff7aca062ba74174fcbe/src/presets/netlify-v2.ts#L29-L40 this seems to need to be replicated (with at least some adjustment as directories point to different things) to netlifyStatic
preset ( https://github.com/unjs/nitro/blob/346a49508b58b747f164ff7aca062ba74174fcbe/src/presets/netlify-v2.ts#L90-L104 ) as this one seems to be actually used with nuxt generate
(probably all the other variants too, I'm just pretty new to this setup so it's not very clear to me )
It seems to me that this config setting for images should be similarly common for each variant of preset in same way as writeHeaders
and writeRedirects
currently is?
from image.
Related Issues (20)
- Bug in NuxtImg sizes configuration: Incorrect default size assignment #2
- Notion s3 url images can't be used HOT 4
- NuxtPicture doesn't accept resize in modifiers
- loading="lazy" don't work HOT 3
- Problem with generating WebP images and modern formats. HOT 1
- Prismic provider with netlify HOT 2
- Remote image path to s3 bucket is not working using Nuxt2 HOT 2
- Disable auto-detection of a specific provider HOT 3
- Missing fit modes on cloudinary provider, and existing ones are wrongly mapped HOT 4
- Add provider for h2non/imaginary HOT 1
- Nitro publicAssets 404
- Provider Vercel is ignoring format
- ζε ζδ»ΆεΊεΈιθ―― HOT 3
- IPX modifier background color does not work
- Images aren't being retrieved from Strapi provider when using `nuxt generate` HOT 5
- IPX Internal Server Error HOT 6
- Bunny bugs HOT 2
- IPX_ERROR
- IPX error 500 with `nuxt generate`
- Absolute Cloudinary URLs do not work
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from image.