Next.js Discord

Discord Forum

Unable to statically import images on next.js

Unanswered
porto posted this in #help-forum
Open in Discord
TLRD
I'm having some troubles trying to import statically images on next.

EDIT1: The problem is with the library plaiceholder, 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 code


next.config.mjs
import withPlaiceholder from '@next/plaiceholder'

const config = {}
export default withPlaiceholder



Page.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 :()

0 Replies