nuxt
ipx 500 with non-rounded image widths during prerender
├─ /_ipx/w_880.5/media/foo.jpg (544ms) nitro 3:16:14 PM
│ ├── Error: [500]
│ └── Linked from /
Note the w_880.5, I suspect it's failing because of this.
I have in my config:
densities: [1, 1.5, 2],
We see a similar issue:
├─ /_ipx/s_800x950/base/c32bc42e-0c27-45f6-b0da-3f2ae7a3eea0.webp (25305ms) nitro 8:24:28 PM
│ ├── Error: [500]
│ └── Linked from /
│ └── Linked from /de
├─ /_ipx/s_1092x988/base/6de9ee26-1530-4110-98d3-b3c349db5d47.webp (25324ms) nitro 8:24:28 PM
│ ├── Error: [500]
│ └── Linked from /
│ └── Linked from /de
├─ /_ipx/s_720x856/base/c32bc42e-0c27-45f6-b0da-3f2ae7a3eea0.webp (25318ms) nitro 8:24:28 PM
│ ├── Error: [500]
│ └── Linked from /
│ └── Linked from /de
├─ /_ipx/s_1440x1712/base/c32bc42e-0c27-45f6-b0da-3f2ae7a3eea0.webp (25319ms) nitro 8:24:28 PM
│ ├── Error: [500]
│ └── Linked from /
│ └── Linked from /de
Images are shown during development but it seems to crash on yarn generate.
I have a similar issue when generating. The error only gets thrown when I use this on a <NuxtImg>:
:modifiers="{ tint: '#0c4a6e' }"
Errors prerendering:
├─ /_ipx/tint_%230c4a6e&f_webp&q_80&fit_cover&s_512x288/header.jpeg (28ms) nitro 12:15:01 PM
│ ├── [500]
│ └── Linked from /
├─ /_ipx/tint_%230c4a6e&f_webp&q_80&fit_cover&s_614x345/header.jpeg (28ms) nitro 12:15:01 PM
│ ├── [500]
│ └── Linked from /
├─ /_ipx/tint_%230c4a6e&f_webp&q_80&fit_cover&s_1x1/header.jpeg (28ms) nitro 12:15:01 PM
│ ├── [500]
│ └── Linked from /
├─ /_ipx/tint_%230c4a6e&f_webp&q_80&fit_cover&s_538x303/header.jpeg (29ms) nitro 12:15:01 PM
│ ├── [500]
│ └── Linked from /
├─ /_ipx/tint_%230c4a6e&f_webp&q_80&fit_cover&s_1228x690/header.jpeg (29ms) nitro 12:15:01 PM
│ ├── [500]
│ └── Linked from /
├─ /_ipx/tint_%230c4a6e&f_webp&q_80&fit_cover&s_1076x606/header.jpeg (31ms) nitro 12:15:01 PM
│ ├── [500]
│ └── Linked from /
├─ /_ipx/tint_%230c4a6e&f_webp&q_80&fit_cover&s_1024x576/header.jpeg (32ms) nitro 12:15:01 PM
│ ├── [500]
│ └── Linked from /
├─ /_ipx/tint_%230c4a6e&f_webp&q_80&fit_cover&s_640x360/header.jpeg (32ms) nitro 12:15:01 PM
│ ├── [500]
│ └── Linked from /
├─ /_ipx/tint_%230c4a6e&f_webp&q_80&fit_cover&s_7680x4320/header.jpeg (32ms) nitro 12:15:01 PM
│ ├── [500]
│ └── Linked from /
├─ /_ipx/tint_%230c4a6e&f_webp&q_80&fit_cover&s_3840x2160/header.jpeg (32ms) nitro 12:15:01 PM
│ ├── [500]
│ └── Linked from /
├─ /_ipx/tint_%230c4a6e&f_webp&q_80&fit_cover&s_1280x720/header.jpeg (33ms) nitro 12:15:01 PM
│ ├── [500]
│ └── Linked from /
├─ /_ipx/tint_%230c4a6e&f_webp&q_80&fit_cover&s_2x2/header.jpeg (33ms) nitro 12:15:01 PM
│ ├── [500]
│ └── Linked from /
nitro 12:15:01 PM
ERROR Exiting due to prerender errors. 12:15:01 PM
at prerender (node_modules/nitropack/dist/core/index.mjs:2054:11)
at async node_modules/nuxt/dist/index.mjs:3737:5
at async build (node_modules/nuxt/dist/index.mjs:5967:3)
at async Object.invoke (/Users/meinenieuwland/.config/yarn/global/node_modules/nuxi/dist/chunks/build.mjs:59:5)
at async Object.invoke (/Users/meinenieuwland/.config/yarn/global/node_modules/nuxi/dist/chunks/generate.mjs:36:5)
at async _main (/Users/meinenieuwland/.config/yarn/global/node_modules/nuxi/dist/cli.mjs:49:20)
Instead of :modifiers="{ tint: '#0c4a6e' }" use the hex value converted to decimal like so :modifiers="{ tint: 805486 }"
It took me hours to figure this out. 🤪
For conversion I used: https://www.rapidtables.com/convert/number/hex-to-decimal.html?x=0C4A6E
If you want to do it in line you can parse the hex value as decimal like this: :modifiers="{ tint: parseInt('A81E20', 16) }"
The provided solution does not work anymore with the current version. IPX now complains that the provided parameter must be object or string.
We need to use hsl or hwb now like this: :modifiers="{ tint: 'hsl(360 100% 50%)' }"