在React中不显示服务器上的图像

Question

这是代码

import React from "react";
import ReactDOM from "react-dom/client";

const Header = () => {
  return (
    <div className="header">
      <div className="logo-container">
        <img className="logo" src="/assets/logo.jpg" />
      </div>
      <div className="nav-items">
        <ul>
          <li>Home</li>
          <li>About us</li>
          <li>Contact us</li>
          <li>Cart</li>
        </ul>
      </div>
    </div>
  );
};

const AppLayout = () => {
  return (
    <div className="App">
      <Header />
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<AppLayout />);

请帮助我，因为我是新反应。

我期待在服务器上显示图像

Answer 1

如果仍然不起作用，请尝试在上面的代码中添加 alt 标签 试试这个：

从“react”导入React； 从“react-dom/client”导入 ReactDOM；

const Header = () => {
  return (
    <div className="header">
      <div className="logo-container">
        <img className="logo" src={process.env.PUBLIC_URL + "/assets/logo.jpg"} alt="Logo" />
      </div>
      <div className="nav-items">
        <ul>
          <li>Home</li>
          <li>About us</li>
          <li>Contact us</li>
          <li>Cart</li>
        </ul>
      </div>
    </div>
  );
};

const AppLayout = () => {
  return (
    <div className="App">
      <Header />
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<AppLayout />);