I want to change the image I am using whenever the product is added to cart

I am using this right now, need to add a condition in such a way that whenever the getCartCount is 0 it should show image as bag_empty instead of bag and when the cart count is more than 0 it should show bag

<Badge count={getCartCount()}>
  <img
   className="bag__img"
   src={bag}
   alt=""
   onClick={user ? handleOpenBag : handleDynamicLink}
   onMouseOver={() => setbag(hoverbag)}
   onMouseOut={() => setbag(cart)}
 />
</Badge>

Answer

You could use a ternary operator like below, assuming that you have your empty bag image in your public folder.

<Badge count={getCartCount()}>
    <img
      className="bag__img"
      src={getCartCount()>0 ? bag : "/emty-bag-goes-here.png"}
      alt=""
      onClick={user ? handleOpenBag : handleDynamicLink}
      onMouseOver={() => setbag(hoverbag)}
      onMouseOut={() => setbag(cart)}
    />
</Badge>