# Next Image not working

**URL:** <https://answers.netlify.com/t/next-image-not-working/94133>\
**Category:** Support\
**Tags:** nextjs\
**Created:** [June 10, 2023, 2:04pm UTC](https://answers.netlify.com/t/next-image-not-working/94133 "2023-06-10T14:04:24Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![woj.niemiec.code](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/woj.niemiec.code/32/48240_2.png) [@woj.niemiec.code](https://answers.netlify.com/u/woj.niemiec.code)\
**Post date:** [June 10, 2023, 2:04pm UTC](https://answers.netlify.com/t/next-image-not-working/94133/1 "2023-06-10T14:04:24Z")

</div>

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/](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/](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.

---

<div class="post-metadata">

**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\
**Post date:** [June 11, 2023, 2:50pm UTC](https://answers.netlify.com/t/next-image-not-working/94133/2 "2023-06-11T14:50:47Z")

</div>

The error is this:

```auto
{"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"`

---

<div class="post-metadata">

**Author:** ![woj.niemiec.code](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/woj.niemiec.code/32/48240_2.png) [@woj.niemiec.code](https://answers.netlify.com/u/woj.niemiec.code)\
**Post date:** [June 11, 2023, 8:05pm UTC](https://answers.netlify.com/t/next-image-not-working/94133/3 "2023-06-11T20:05:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Melvin](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/melvin/32/23606_2.png) [@Melvin](https://answers.netlify.com/u/Melvin)\
**Post date:** [June 12, 2023, 10:39am UTC](https://answers.netlify.com/t/next-image-not-working/94133/4 "2023-06-12T10:39:16Z")

</div>

Hi @woj.niemiec.code,

Maybe this would help:

> **[Components: | Next.js](https://nextjs.org/docs/pages/api-reference/components/image)**
>
> Optimize Images in your Next.js Application using the built-in \`next/image\` Component.

On my own little test site I use :

```auto
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?

---

<div class="post-metadata">

**Author:** ![woj.niemiec.code](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/woj.niemiec.code/32/48240_2.png) [@woj.niemiec.code](https://answers.netlify.com/u/woj.niemiec.code)\
**Post date:** [June 13, 2023, 4:47pm UTC](https://answers.netlify.com/t/next-image-not-working/94133/5 "2023-06-13T16:47:13Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![SamO](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/samo/32/41847_2.png) [@SamO](https://answers.netlify.com/u/SamO)\
**Post date:** [June 14, 2023, 1:41pm UTC](https://answers.netlify.com/t/next-image-not-working/94133/6 "2023-06-14T13:41:05Z")

</div>

can you share your src ?

---

<div class="post-metadata">

**Author:** ![woj.niemiec.code](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/woj.niemiec.code/32/48240_2.png) [@woj.niemiec.code](https://answers.netlify.com/u/woj.niemiec.code)\
**Post date:** [June 14, 2023, 5:08pm UTC](https://answers.netlify.com/t/next-image-not-working/94133/7 "2023-06-14T17:08:56Z")

</div>

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 🙂

Thank you for your support and quick replies!