Adding photos to the portfolio with a file path

[Niblick1020]

const dataportfolio = [{
        img: "./assets/images/Code_of_API_project.png",
        description: "API integration",
        link: "pages/APIproject/index.js",
    }]

for example when I add a png to "./assets/images/Code_of_API_project.png" I can not get it to display within the portfolio page.

this is what it looks like

I added console.error and console.log for error catching.

{dataportfolio.map((data, i) => {
            return (
              <div key={i} className="po_item">
                <img 
                src={data.img}
				alt={`Project ${i + 1}`}
				onError={(e) => {
				console.error(`Error loading image for project ${i + 1}. Image source: ${data.img}`, e);
				}}
				onLoad={() => {
				console.log(`Image loaded successfully for project ${i + 1}. Image source: ${data.img}`);
				}}/>
                <div className="content">
                  <p>{data.description}</p>
                  <a href={data.link}>view project</a>
                </div>
              </div>
            );
          })}

and this is my output:

I am new with this and I would appreciate the help. thank you for your time.

[Niblick1020]

I found a solution by importing this in content_option.js
import CodeOfAPIProjectImage from "./assets/images/Code_of_API_project.png";

then I inserted CodeOfAPIProjectImage into the array of objects.

const dataportfolio = [{
        img: CodeOfAPIProjectImage,
        description: "API integration",
        link: "pages/APIproject/index.js",
    }]