How to fix verbal deployment errors with react project? - reactjs

Question

I am trying to deploy a react personal portfolio using Vercel, but keep getting these errors. How do i fix? I also don't understand the error about img because it is in src enter image description here
code to my portfolio: https://github.com/Kdot117/Personal-portfolio

Answer 1

These lines in your code in Work.js are the issue.
You are importing images with absolute paths.
import BusinessCard from "/Users/kendrickizaguirre_1/kendricks-portfolio/src/BusinessCard.jpg"
import pizza from "/Users/kendrickizaguirre_1/kendricks-portfolio/src/components/pizza.jpg"
import madstat2 from "/Users/kendrickizaguirre_1/kendricks-portfolio/src/components/madstat2.jpg”
A cleaner approach (without using a library) will be to.
Make an images folder inside src.
Copy all images you are importing in js components inside this folder. or with meaningful subfolders inside the image folder.
Finally import the images in the components with the relative path.
So if I change your package structure as below.
└── Personal-portfolio
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── index.html
│   └── manifest.json
└── src
├── App.css
├── App.js
├── components
│   ├── About.js
│   ├── Contact.js
│   ├── Header.js
│   ├── Navigation.js
│   └── Work.js
├── images
│   ├── BusinessCard.jpg
│   ├── abstract.jpg
│   ├── kenny.jpg
│   ├── madstat.jpg
│   ├── madstat2.jpg
│   └── pizza.jpg
├── index.css
└── index.js
Then import in Work.js will look like this
import BusinessCard from “../images/BusinessCard.jpg"
import pizza from "../images/pizza.jpg"
import madstat2 from "../images/madstat2.jpg”

Answer 2

You are importing some files from an absolute path pointing to your laptop a as you can see here:
https://github.com/Kdot117/Personal-portfolio/search?q=%2Fusers%2F
Replace those with relative imports, such that
/Users/kendrickizaguirre_1/kendricks-portfolio/src/components/BusinessCard.jpg becomes src/components/BusinessCard.jpg, which will then be available also in Vercel.
BUT. Here's a better alternative. Move those images to a folder called public. And then Next.js will serve those as static files as explained here:
https://nextjs.org/docs/basic-features/static-file-serving
In this case you don't need to import anything, you would simply say <img src="/BusinessCard.jpg">
Additionally, you might want to take a look at Next Image component for optimized images out-of-the-box: https://nextjs.org/docs/basic-features/image-optimization