Next Image not working

Support
1

Hello, I recently started learning Next.js and I decided to deploy my app using netlify. This is the url of the app: https://willowy-chebakia-84848c.netlify.app/

I have a problem with next/Image tag not working on netlify. Images are loading properly on localhost, both on dev/build version.

Some of the source:
import appleImg from “…/…/…/…/…/…/public/figureType/apple.png”;

// later in the same file:

I’m using t3 stack: https://create.t3.gg/
I dont have any config related to images in next.config.mjs.

What could be the reason? I don’t want to use any cdn or other fancy stuff for now, just wanted to pack some images together with the rest of my app.

I can see 502 http code on image load but probably its because i don’t have 404 page configured so it might be the reason, but it indicates that the images could not be found on the server.

2

The error is this:

{"errorMessage":"2023-06-11T14:49:25.626Z 0ccc1a5f-05fa-4ca6-871a-f6d407a3dc5f Task timed out after 10.01 seconds"}

How big are the source images that you’re using?

Also, if you don’t need anything fancy, you can simply use the standard <img src=""/> tag. Instead of importing from public folder, simply link to those images as src="/figureType/apple.png"

3

Hi, thank you for your reply. It’s just 3.05 kB. I think I’m totally loss when it comes to the whole mechanism of images loading in next/netlify. I initially thought that next server is capable of preparing some version of image based on props passed to tag and I dont need to add any more code. Could you point me to the documentation of next/netlify (if this distinction is needed) how does it work and why my code is wrong in this example? I can pass more info about the code if needed. Once again, thanks for your reply.

Kind regards,
Wojciech

4

Hi @woj.niemiec.code,

Maybe this would help:

On my own little test site I use :

import React from 'react'
import Image from 'next/image'
import styles from '../page.module.css'

const page = () => {
  return (
    <main className={styles.main}>
      <div className={styles.description}>
        <p>
          Images
        </p>
        <div>
            <Image
              src="/logo-netlify.svg"
              alt="Netlify Logo"
              className={styles.netlifyLogo}
              width={190}
              height={75}
              priority
            />
        </div>
      </div>

.......     

    </main>
  )
}

export default page

Would this work for you?

5

Thanks for the link, I already visited it few times but I still have no idea what I’m doing wrong. This is all very strange, I started fresh next starter from next page and having png images clearly works there while the same simple Image usage does not work when using t3 stack. I have no idea what might be the reason…

6

can you share your src ?

7

Okay, I think I found the cause of the issue.
I’m using next-intl together with middleware.ts.
In previous versions of this library propsed matcher was in following format: ["/((?!api|_next/static|_next/image|favicon.ico).*)"].

Current proposed format: ['/((?!api|_next|.*\\..*).*)'] works properly both on local env and on netlify :slight_smile:

Thank you for your support and quick replies!