Unable to statically import images on next.js
Unanswered
porto posted this in #help-forum
portoOP
TLRD
I'm having some troubles trying to import statically images on next.
EDIT1: The problem is with the libraryplaiceholder, it's break when I export my next config with the lib plugin... I really don't understand why it just breaks on vercel (not locally)
SOLUTION: Solution found, but I'ld like to know why it's broke... The solution is basicly remove withPlaceholder and everything works normal... Looking the plugin code https://github.com/joe-bell/plaiceholder/blob/main/packages/next/src/index.ts it sems to be really simple, my guess is that some pattern on next.config has changed and the plaiceholder lib did not patched...
## Scenario
I'm trying to implement blur placeholder image in some different cases
- local image with staticaly import
- local image with dynamic import
- remote image (of course with dynamic data)
## The problem
The problem is on
local image with statically import. In this case I've the following codenext.config.mjs
import withPlaiceholder from '@next/plaiceholder'
const config = {}
export default withPlaiceholderPage.tsx
import image from '../../../public/teste.jpg'
export default function Page() {
return (
<Image src={image} placeholder="blur" />
)
}The above code build with no problems in local. But in vercel deploy there is this problem:
next-image-placeholder-blur@0.1.0 build
> next build
â–² Next.js 14.1.4
Creating an optimized production build ...
free(): invalid size-------
## Some tests
1. The bellow code doesn't break the build but doest not working (make sense not working considering the blur documentation)
export default function Page() {
return (
<Image src="teste.jpg" placeholder="blur" />
)
}2. Remove withPlaiceholder works good in terms of build (of course that breaks the blur effect :()