Support https://*.nuxtjs.org in domains

Describe the feature

The idea is to persist images that will be consumed a lot so the server doesn't need to reprocess it on each time.

If we are concerned about bloating server storage, we can think of a method to auto delete images that is not used in a specified timeframe (implemented as an option).

Additional information

• Would you be willing to help implement this feature?

Describe the feature

Hello.

There seems to be a use case in Nuxt Image to support multiple source folders, for example nuxt /content and nuxt /assets:

https://twitter.com/mrblot4/status/1649513803745206277

Do you think it would be better to handle this in IPX or Nuxt Image?

I'd be happy to handle any PRs if they fit with the spirit of the library.

Cheers,
Dave

Additional information

• Would you be willing to help implement this feature?

Namaste.
IIIF or International Image Interoperability Framework is ubiquitous api standard for image proxying. It's widespread in humanities, heritage institutions, libraries, so on. Have many high quality tools like mirador, universal viewer, open-sea-dragon with deep zoom view, so on.
It will be great if support is added for iiif-image api.
It should be straight forward to implement.

If I use images with names containing parentheses, ipx will show an error instead of an image.

example

https://github.com/speker2010/ipx-bug-showcase
http://localhost:3000/image/_/foto.jpeg works fine
http://localhost:3000/image/_/foto(1).jpeg shows error IPX: Forbidden path:/foto(1).jpeg

Sevice base on process on each request specially thumbnail service need to be add hash/hmac for prevent DoS/DDoS attach.

https://docs.imgproxy.net/signing_the_url

For prevent this issue each request must be sign, or hash base on secret key/salt.

Specifically on resizing (numeric) operators to avoid abusing server (related to #44)

Hey! I believe this issue is meant to be here because I tried digging through the source of @nuxt/image－which led to nothing, and I found out that whatever is parsing the new URL() API from our @nuxt/image config.domains throws an Invalid URL error whenever the domain begins with a protocol-like string. For example, I use http.cat for my error pages and put a funny cat status there. After upgrading the image module today, I saw my app wasn't starting because of this error and I started digging, after 20 minutes of searching through compiled .cjs source files, I believe this issue is directly related to your module ipx and its createIPX middleware. Not sure though. But my code works right before that method is called. I also tried digging your source but couldn't find where my domain options reach. I will keep digging and will update this issue if I find more details. I hope this gets fixed.

Describe the feature

Hello, do you plan to support AVIF?

Additional information

• Would you be willing to help implement this feature?

Hi, there is a way to support gifs format ?

as example https://flapili.fr/_ipx/author/mrsociety404.gif doesn't work while https://flapili.fr/author/mrsociety404.gif does

IPX Error (500)
File image larger > 3 MB. How to fix it? Thank

I running IPX with npx ipx and some env vars.

I'm getting a lot of warnings in production:
MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 close listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit

Do you have any plans to make sources pluggable?

I want to use other sources, like the S3, Cloud Storage, etc.
But it's needed to folk and add logic to Init sources and getSrc.

Hello,

I'm writing again because of the fetchOptions option.

I run into the problem that I need to asynchronously retrieve an auth token, and using nuxt/image and a custom ipx middleware I have no way to generate an actual token on demand or update it.

Meaning in the current state, I can create a token once, and at some point restart the instance.

An alternative would be a proxy middleware, but in this case I run into the fixed IPX options to the alias. The problem here is the random port of Nuxt generate, I would need this in the alias. Finally the IPX can address the proxy to solve the auth problem.

@pi0 Do you have an idea?

squoosh is a wasm alternative to sharp. While sharp is much faster and supporting modern formats, it has its own downsides:

• NodeJS dependency. Cannot be used in environments like Deno or Cloudflare workers
• Native dependency. This reduces the portability of the library. Both bundle distribution and target-machine (if there is no pre-built version for a specific node version, installation requires building with node-gyp) (example nuxt/image#204)

We can keep sharp as an opt-in dependency and install/use squoosh by default. This needs a refactor for handlers to create a shared interface. (as a result, we lose some existing features)

Note: squoosh api seems is not released on npm nor documented! We might use/redistribute http://npmjs.com/package/@squoosh/cli, inspire and inline source similar to vercel/next.js#22253, or publish as squoosh.
Related: GoogleChromeLabs/squoosh#934 / GoogleChromeLabs/squoosh#1002 (PR depends on NodeJS API like worker_threads therefore removing first point)

Steps to reproduce:

1. Start IPX, npx ipx
2. Submit a request such as GET /test/%00, or GET /test/%01, etc
3. IPX crashes with error:

node:internal/process/promises:246
          triggerUncaughtException(err, true /* fromPromise */);
          ^

TypeError [ERR_INVALID_CHAR]: Invalid character in statusMessage
    at new NodeError (node:internal/errors:363:5)
    at ServerResponse.writeHead (node:_http_server:323:11)
    at ServerResponse._implicitHeader (node:_http_server:266:8)
    at write_ (node:_http_outgoing:764:9)
    at ServerResponse.end (node:_http_outgoing:853:5)
    at /ipxissue/node_modules/ipx/dist/cli.js:543:11 {
  code: 'ERR_INVALID_CHAR'
}

This is impacting nuxt/image and thus any apps using it.
I haven't had a chance to review IPX's source; will look tomorrow and submit a PR if I can get to the bottom of it.

Error:
(node:43925) [node-fetch#buffer] DeprecationWarning: Please use 'response.arrayBuffer()' instead of 'response.buffer()' 09:03:53
(Use node --trace-deprecation ... to show where the warning was created)

Node:
v17.8.0

This dependency generate warning:

Where fix require apply and test:

Show after Node upgrade

Modifiers' separator is hardcoded as comma. This might be a problem in <picture> tag where comma-separated list can be used in source's srcset to define list of possible images based on size.

Problematic code:

<picture>
	<source srcset="http://localhost:3000/embed,f_webp,s_200x200/static/buffalo.png" type="image/webp">
	<img src="http://localhost:3000/s_200x200/static/buffalo.png">
</picture>

The line <source srcset="http://localhost:3000/embed,f_webp,s_200x200/static/buffalo.png" type="image/webp"> is actually read by browsers like 3 different URLs:

1. http://localhost:3000/embed
2. f_webp
3. s_200x200/static/buffalo.png

Suggestion:

Introduce new env variable IPX_SEPARATOR.

Change this line

  // Read modifiers from first segment
  if (modifiersStr !== '_') {
    for (const p of modifiersStr.split(getEnv('IPX_SEPARATOR', ','))) {
      const [key, value = ''] = p.split('_')
      modifiers[key] = decode(value)
    }
  }

Note:

URL encoded comma %2C won't help in this case.

I'm more than happy to make a PR if you find this solution suitable and wanted.

Allow URL shortening and omitting base for SEO optimization when using remote URLs.

Ref: nuxt/image#137 (comment)

It would be useful to support the withoutEnlargement option. Auto-generated srcsets often contain very large sizes, but can gracefully handle smaller sizes if those are returned instead, saving bandwidth and processor time.

This could either be a modifier in the URL or an option passed to the constructor. I'm happy to open a PR if there is a decision on the API.

IPX returns image/svg content type for SVG files which is invalid and cause issues with rendering SVG images.

When serving image directly from server (say development as production server) images does not render because of invalid content type.

DEMO: https://codesandbox.io/s/jolly-http-wovwm?file=/pages/index.vue

When adding /server/middleware/ipx.js to nuxt.config.js (as indicated at https://image.nuxtjs.org/providers/ipx/#advanced-custom-servermiddleware) while using @nuxt/bridge...

import { createIPX, createIPXMiddleware } from 'ipx'
const ipx = createIPX({
  dir: '',
  domains: [],
  alias: {},
  sharp: {},
})
export default createIPXMiddleware(ipx)

it results in an error:

 WARN  [worker] Named export 'stat' not found. The requested module 'fs-extra' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'fs-extra';
const { stat, readFile } = pkg;


  import { stat, readFile } from 'fs-extra';
  ^^^^
  SyntaxError: Named export 'stat' not found. The requested module 'fs-extra' is a CommonJS module, which may not support all module.exports as named exports.
  CommonJS modules can always be imported via the default export, for example using:

  import pkg from 'fs-extra';
  const { stat, readFile } = pkg;

  at ModuleJob._instantiate (internal/modules/esm/module_job.js:121:21)
  at async ModuleJob.run (internal/modules/esm/module_job.js:166:5)
  at async Loader.import (internal/modules/esm/loader.js:178:24)
  at async Object.loadESM (internal/process/esm_loader.js:68:5)

The background modifier doesn't seem to work, here are the URLs I tried :

/img/1.jpeg?fit=contain&s=300_100&b=FF0000
/img/1.jpeg?fit=contain&s=300_100&background=FF0000
/img/1.jpeg?fit=contain&s=300_100&bg=FF0000

Has anyone managed to successfully integrate IPX with NestJS?

I have problem when working with ipx etag.
I read ipx repository and it support etag but it not working as expected.
I explored that etag from request header and etag are different when generated

Please check it

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update all non-major dependencies (@vitest/coverage-v8, eslint-config-unjs, vitest)

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update devdependency eslint to v9

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Could there be any upsides with implementing a solution that forces image to be resized at a certain aspect-ratio?

e.g.: aspect-ratio prop and focal-point prop

The nuxt image module uses ipx to provide the image processing endpoint and it passes through a quality option like q=65 in the url. From what I can tell this is ignored at the ipx end. Is it possible to use this to tell sharp to resize/process at a specific quality level?

If sharp's rotate() function is called without arguments then it will try to automatically rotate the image based on exif data. ipx currently doesn't support this, and can only do explicit rotation. It would be good if it either allowed rotate to be called without an angle, or if auto-rotation was the default (which would be my suggestion)

I get this error when calling the ipx endpoint using version 0.9.1 together with the nuxtjs image module as a custom middleware . 0.8.0 worked fine without any problems.

Segmentation fault (core dumped)
npm ERR! code ELIFECYCLE
npm ERR! errno 139
npm ERR! lcr@ dev: `nuxt`
npm ERR! Exit status 139
npm ERR! 
npm ERR! Failed at the lcr@ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/niklas/.npm/_logs/2021-11-13T13_51_21_220Z-debug.log

debug.log

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle lcr@~predev: lcr@
6 info lifecycle lcr@~dev: lcr@
7 verbose lifecycle lcr@~dev: unsafe-perm in lifecycle true
8 verbose lifecycle lcr@~dev: PATH: /usr/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/niklas/code/www/node_modules/.bin:/home/niklas/.sdkman/candidates/maven/current/bin:/home/niklas/.sdkman/candidates/java/current/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/home/niklas/.bin:/home/niklas/.bin
9 verbose lifecycle lcr@~dev: CWD: /home/niklas/code/www
10 silly lifecycle lcr@~dev: Args: [ '-c', 'nuxt' ]
11 silly lifecycle lcr@~dev: Returned: code: 139  signal: null
12 info lifecycle lcr@~dev: Failed to exec dev script
13 verbose stack Error: lcr@ dev: `nuxt`
13 verbose stack Exit status 139
13 verbose stack     at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:400:28)
13 verbose stack     at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:400:28)
13 verbose stack     at maybeClose (internal/child_process.js:1058:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:293:5)
14 verbose pkgid lcr@
15 verbose cwd /home/niklas/code/www
16 verbose Linux 5.8.0-63-generic
17 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "dev"
18 verbose node v14.18.1
19 verbose npm  v6.14.15
20 error code ELIFECYCLE
21 error errno 139
22 error lcr@ dev: `nuxt`
22 error Exit status 139
23 error Failed at the lcr@ dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 139, true ]

sharp supports several features that can optimize the filesize of output images. These can give significant improvements, but can be very expensive operations so should not be the default. The options are palette for png, and a number of options for jpeg that are enabled with the mozjpeg option.

I'm using nuxt/image with the custom IPX Server middleware and always get an IPX Forbidden error although the domain is set in

const ipx = createIPX({
  domains: ['...'],
})

As soon as I downgrade to 0.6.7 everything is working fine. Was there a bigger change since 0.6.7?

Support abstract persistent cache for both input source and converted images. (implies supporting ttl)

Related: #46

Hey team,

I'm trying to get in contact with someone to report a security vulnerability affecting IPX. Is there a good email or place I'd be able to report this?

Cheers,
Sam

The IPX has an issue with detecting a suitable format for remote images without the file extension. like Unsplash images:

https://images.unsplash.com/photo-1606112219348-204d7d8b94ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1940&q=80

We should drop the format detection logic and handle unknown formats.
https://github.com/nuxt-contrib/ipx/blob/master/src/ipx.ts#L124-L127

\cc @pi0

https://www.npmjs.com/package/svgo

It would be good if this could support a local cache for files loaded over HTTP. Ideally it could save the ETag too. Most environments have some form of cache available, even serverless functions which can use /tmp.

https://github.com/unjs/citty

Currently, file extension stays the same on conversion to a different format. This is a bad behavior and should be fixed.

Describe the feature

At first I'd just like to say that you guys did a very good job with the project! :)

I'm lacking one feature from ipx that prevents me from moving to it completely and that is content aware image cropping. While doing research on the topic, I've stumbled upon https://github.com/jwagner/smartcrop-sharp. It's a working library that provides just that. Maybe it's a good starting point?

Additional information

• Would you be willing to help implement this feature?

Describe the feature

sharp and libvips do support heic

can you add it's support too?

Additional information

• Would you be willing to help implement this feature?

In my project, I need to get images via ipx, and if there is no such image, I would love to get some placeholder that I would have specified in options. So, is there any way to add such a thing, so the initialization would look like

import { createIPX, createIPXMiddleware } from "ipx";

const ipx = createIPX({
  /* other options */
  fallbackUrl: '/path/to/the/image.png'
});
const app = express();
app.use("/image", createIPXMiddleware(ipx));

Or is there already a way I could handle such 404 errors myself?

Currently, if you want animated output you need to specifically choose it. It would be good if animated webp input images could automatically generate animated output. I'm not sure what the overhead would be of just passing animated to the sharp constructor every time.

Anybody knows how can i set https.Agent options like "rejectUnauthorized" and "timeout" in IPXOptions{fetchOptions}? Agent creates in /src/sources/http.ts in function createHTTPSource.

I got error when installing latest 0.9.0 version, 0.8.0 works fine

npm ERR! code ENOENT
npm ERR! syscall chmod
npm ERR! path **/node_modules/ipx/dist/cli.js
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, chmod '**/node_modules/ipx/dist/cli.js'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent