IMG Files not uploading

[Darkskittlz]

Hey @craftzdog hope you're doing well. I've been doing my best to configure my next.config.js file to accomadate image files in my project. But no matter what I've tried I haven't been able to get my files to upload in production. Everything works fine in development and I'm able to create a successful build, but hosting with Netlify & Vercel has yielded no succesful builds after 3 days of debugging.

Attached are my error logs, a link to my repo, and my build output.

Repo: https://github.com/Darkskittlz/TotoroPortfolio

Vercel: message.txt

Netlify: message (1).txt

Next Build Results:

[ghost]

I've only recently started to dabble in Javascript so maybe I'm completely wrong. But it seems, from the attached .txt files, that the const you have used are not called in correctly. It's only a guess.

Takuya Repo Like in the repo from Takuya he has all his components inside the components folder. An example I will use is the logo.js file.

const Logo = () => {
  const footPrintImg = `/images/footprint${useColorModeValue('', '-dark')}.png`

So when you follow the path of the footPrintIMG you will find that it's inside of the images folder. Note that there aren't any dots infant of the /. If I'm correct the path will be directed from the main folder to the images folder. So the image can be found.

Your Repo Just as in the case above I will use the logo.js file again that is in your repo.

const Logo = () => {
    const footPrintImg = `/images/footprint${useColorModeValue('', '-dark')}.png`

As you can see the code is the exact same. However, the most important part is, is that your images folder is somewhere else completely. Your current path is Totoroportfolio/src/components/logo.js. In the case of Takuya, the path is craftzdog-homepage/components/logo.js. While using the exact same code there are different paths. I think that by adding the . like in HTML you can move to the correct directory where your image files are located. So in this instance I think the following can be solved by using:

const Logo = () => {
    const footPrintImg = `../images/footprint${useColorModeValue('', '-dark')}.png`

Or maybe in this way:

const Logo = () => {
    const footPrintImg = `public/images/footprint${useColorModeValue('', '-dark')}.png`

I've only recently started with Javascript so I'm not completely sure. But by using the . in HTML you can go back to a upper directory. So maybe it's in like that in Javascript too.

[Darkskittlz]

Thank you @Kamjasunim for your well-thought out response. I've experimented with different file paths but that doesn't seem to be the problem. I've moved my image files around from public to src a few times and they all render perfectly in development. Its just in production they aren't being parsed correctly into my build or dist folder, so they don't spin up to web with Vercel or Netlify hosting. Its ok though, I'm refactoring my code and migrating away from NextJS to a different framework.