即使在 html 中有正确的路径，图像也没有加载

Question

图片未加载。我知道这是个愚蠢的问题。但是我暂时无法解决这个问题，我会非常感谢

层次结构是

我的代码是这样的

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;

输出是

Answer 1

您应该导入图像，然后将其传递给 src。

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="{logoImage}" alt="logo" />
        </div>
      </div>
    </header>
  );
};

export default Header;

Answer 2

将直接相对路径传递给 src 属性将使路径设置相对于 public 目录，而不是反应 src 目录

您可以将资产复制到 public 目录。

或

您可以使用相对路径导入图像，并使用图像变量作为 img 标签的 src 值。

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;

或

如果您不想导入，请使用 require() 作为 src 值，例如：

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;

快乐编码

即使在 html 中有正确的路径，图像也没有加载

Image is not getting loaded even after having proper path in html

html

image