I'm about to deploy a website, and I discover the error message below

I tried moving the image from my assets folder to my public folder and redeploying.
I also tried importing it from the images folder and adding it as jsx.
But none worked
This is my current folder structure

This is the code using the background. Works locally, but not in deployment

import React from "react";
import Loader from "./StyledHeader";

const HeroHeader = () => {


  return (
    <div>
      <div className="hero-img">
        <img src= "public/images/pasta-image.jpg" alt="" />

        <div className="hero-text">
          <h1>Checkout</h1>
          <Loader />
          <h1>Recipes</h1>
        </div>
      </div>
    </div>
  );
};

export default HeroHeader;