Next.js Discord

Discord Forum

Next Image/ Render issue

Unanswered
ASittingDuck posted this in #help-forum
Open in Discord
ASittingDuckOP
Images are not rendering on production but show properly on localhost. Images are passed through the git repo and are indeed passed to production

53 Replies

ASittingDuckOP
I have narrowed it down to the next/image sysstem I am going to have to switch over to img instead of using next's next/image which sucks because I really enjoy lazy loading when needed. So my question is this.... why would next/image suddenly stop working only on Production when (a) the names of files did not change, (b) the images themselves are able to be accessed using the path I provided in src, and (c) literally the only change I have made is to make a wording change. It seems an update on the a key system is responsible (meaning one from NPM)
European sprat
did nextjs update? either way, not enough info to help. would be good to see error logs and example code
ASittingDuckOP
That's the problem I look at logs and I there are LITERALLY 0 errors
I am on AWS and looking at cloud computing monitoring it has NOTHING
And which code should I show. Just a snippet of how I am using next/image?
or should I show the export? I have no idea because I am looking at it all
Sun bear
Well, you should provide code of how you‘re importing/loading the images for example.
ASittingDuckOP
 return <div className={styles.container}>
    <div className={styles.left}>
      <div className={styles.image}>
        <img src={src} alt={alt} width={size} height={size}/>
      </div>
    </div>
    <div className={styles.right}>
      <div className={styles.name}>
        <h3>{name}</h3>
      </div>
      <div className={cls(styles.position, styles.company)}>

        <h4>{position}{company && ` - ${company}`}</h4>
      </div>
      <div className={styles.content} dangerouslySetInnerHTML={{ __html: replaceLastSpaceWithNBSP(bio) }}/>
    </div>
  </div>
}
oh sorry that is a work around i am working on
return <div className={styles.container}>
    <div className={styles.left}>
      <div className={styles.image}>
        <Image src={src} alt={alt} width={size} height={size}/>
      </div>
    </div>
    <div className={styles.right}>
      <div className={styles.name}>
        <h3>{name}</h3>
      </div>
      <div className={cls(styles.position, styles.company)}>

        <h4>{position}{company && ` - ${company}`}</h4>
      </div>
      <div className={styles.content} dangerouslySetInnerHTML={{ __html: replaceLastSpaceWithNBSP(bio) }}/>
    </div>
  </div>
Sun bear
What is the Image-Components src={src} refering to? Are you importing the images as static import? Are you mapping over them?
You need to provide additional code/info
ASittingDuckOP
Yes I am mapping over them, the images are located in the public/images directory.
Sun bear
How are you loading them, show the code please.
ASittingDuckOP
Loading the images, do you mean loading the referencing data like src, or the image itself?
Sun bear
The Images are located on your server I guess?
Provide code for the image mapping
ASittingDuckOP
Yes they are
import Speaker from '@/components/templates/home/preEvent/speakers/speaker'
import styles from '@/styles/components/templates/home/preEvent/speakers/speakers.module.scss'
import PropTypes from 'prop-types'

const Speakers = ({data}) => {
  return (<div className={styles.container} id={'speakers'}>
    <h2>Speakers</h2>
    {data.map(speaker => {
      if (speaker.bio && speaker.bio !== 'foo') {
       return <Speaker key={speaker._id} data={speaker}/>
      }
    })}
    </div>)
}

export default Speakers

Speakers.propTypes = {
  data: PropTypes.arrayOf(PropTypes.shape({
    _id: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    position: PropTypes.string.isRequired,
    company: PropTypes.string.isRequired,
    image: PropTypes.shape({
      src: PropTypes.string.isRequired,
      width: PropTypes.number.isRequired,
      height: PropTypes.number.isRequired,
      alt: PropTypes.string.isRequired
    }),
bio: PropTypes.string.isRequired
  })).isRequired
}
btw its not just THESE images its all images... whether they are mapped over or not
every single image that uses next/image is down
European sprat
am i blind? i don't see any images in that latest snippet
ASittingDuckOP
That last one is where the map happens, I was asked to show the map
unless I misunderstood
the other return above that is the Speaker component
Sun bear
Well, as @European sprat already mentioned, you didn‘t provide code of where you are loading the images actually.
Somewhere in your code you have to load your images or generate paths for the corresponding images. Depends on how you‘re loading them. You have to provide code about that.
ASittingDuckOP
ok so IF i were to show you the path in the src it would be something like this

        return <Image src={'/images/logo.webp'} alt={alt} width={size} height={size}/>
Sun bear
Yeah well, that would be a manual import, where you defined the path. But in your first example with the <Image> Component the src prop was refering to {src}.
So when you‘re refering to „src“ and you‘re mapping over the images, you have to generate/load the image paths somewhere. That would be interesting to see.
ASittingDuckOP
src is just a freaking string like the one I just showed you
the src is coming from a freaking database that has those paths save
in exactly that format
Sun bear
So you‘re hardcoding the src for every image?!
ASittingDuckOP
For now dude, that is going to be replaced soon. But for now, this should show you its not the importing part now is it
The paths are just relative strings that I have on a system I use, and for logos yes I am hard coding those because those are not going to chnage
Sun bear
But you havent changed anything on your method loading them? And they worked fine before?
Dumb Question, but have u checked if the path has changed? Accidently removed files? Possibly an update on your server that could‘ve messed with read permissions?
ASittingDuckOP
Yes I did, I even just exported the collection to my local collection to see since the two run off of different mongo instances
and no I didn't change my method on loading them.
I am attempting to downgrade my next verion now
we will see if that works
Sun bear
Yeah, at this state its pretty hard to tell if its an internal server problem, an issue with next or with your db
ASittingDuckOP
It could also very well be the provideer
hosting I mean
But I doubt it
Sun bear
Have you checked in your browser, using the dev tools, if its fetching the images at all?
ASittingDuckOP
Yes I did
Sun bear
But it‘s not?
ASittingDuckOP
all 404
its attempting to fetch but the images aren't where they should be
Sun bear
Have you tried to import one of the images as a static import using „import exampleimage from „path“; ?
ASittingDuckOP
I haven't. Remember I have to redeploy every time to do this because this issue is ONLY on my production server. The site works completely fine on localhost
I am waiting for the next version rollback right now
Sun bear
Well, it sounds like its an internal server or db issue, because of the fact that its working as expected in your local dev server.
But well, maybe the rollback helps u.
ASittingDuckOP
Damnit that didn't do it. It probably is AWS because next/image uses image optimizers
and the server may simply not be running those