La imagen no se carga incluso después de tener la ruta adecuada en html

La imagen no se carga. Sé que esta es la pregunta estúpida. Pero no puedo arreglar esto por un tiempo ahora, un poco de ayuda, lo agradecería.

La jerarquía es

mi codigo va como

import React from "react";
import "../css/header.css";
const Header = () => {
 return (
 <header>
 <div className="header-container">
 <div className="header-left">
 <img src="../assets/images/logo.png" alt="logo" />
 </div>
 </div>
 </header>
 );
};
export default Header;

la salida es

Solución del problema

Pasar la ruta relativa directa al atributo src haría que la ruta se establezca en relación con el directorio público, no reaccionaría al directorio src

O puede copiar los activos en el directorio público.

O

Puede importar la imagen con una ruta relativa y usar la variable Imagen como valor src para la etiqueta img.

import React from "react";
import Logo from '../assets/images/logo.png';
import "../css/header.css";
const Header = () => {
 return (
 <header>
 <div className="header-container">
 <div className="header-left">
 <img src={Logo} alt="logo" />
 </div>
 </div>
 </header>
 );
};
export default Header;

O

Si no desea importar, use require() como valor src como:

import React from "react";
import logoImage from '../assets/images/logo.png';
import "../css/header.css";
const Header = () => {
 return (
 <header>
 <div className="header-container">
 <div className="header-left">
 <img src={require("../src/images/logo.png").default} alt="logo" />
 </div>
 </div>
 </header>
 );
};
export default Header;

Codificación feliz