刷新页面后图片一直消失

Question

所以我正在做一个 web 应用程序并决定做一个导航栏，我在其中包含了一张图片，但每次我刷新页面时，图片都会消失。它通过代码或通过网络上的刷新按钮刷新消失。我真的不明白为什么，但我对这部分编程真的很陌生。

import React, { Component } from "react";
import { MenuItems } from "./MenuItems";
import { Button } from "./Button";
import "./Navbar.css";
import config from "../../config";

class Navbar extends Component {
  state = { clicked: false };

  handleClick = () => {
    this.setState({ clicked: !this.state.clicked });
  };

  render() {


    const backHome = () => {
      window.location.replace(config.PORTAL_URL);
      return;
    };


    return (
      <nav className="NavBarItems">
        <img
          src="image.png"
          width="15%"
          height="auto"
          onClick={() => backHome()}
          className="image"
        />
        <div className="menu-icon" onClick={this.handleClick}>
          <i className={this.state.clicked ? "fas fa-times" : "fas fa-bars"} />
        </div>
        <ul className={this.state.clicked ? "nav-menu active" : "nav-menu"}>
          {MenuItems.map((item, index) => {
            return (
              <li key={index}>
                <a className={item.cName} href={item.url}>
                  {item.title}
                </a>
              </li>
            );
          })}
        </ul>
        <Button>Sign up</Button>
      </nav>
    );
  }
}

export default Navbar;

MenuItems 类只是

import config from '../../config'

export const MenuItems = [{
        title: "Home",
        url: config.PORTAL_URL,
        cName: 'nav-links'
    },
    {
        title: "Services",
        url: "#",
        cName: 'nav-links'
    },
    {
        title: "Products",
        url: '#',
        cName: 'nav-links'
    },
    {
        title: "Contact us",
        url: '#',
        cName: 'nav-links'
    },
    {
        title: "Sign up",
        url: '#',
        cName: 'nav-links-mobile'
    }
]

图像存储在公用文件夹中。

Answer 1

我设法找到了解决方案。我所做的是将图像移动到公共以外的其他文件夹，在这种情况下，我决定将它放在与使用它的类相同的文件夹中。然后我做了以下事情：

import logo from "./image.png"

然后在有网址的地方我放了“logo”

return (
  <nav className="NavBarItems">
    <img
      src={logo}
      width="15%"
      height="auto"
      onClick={() => backHome()}
      className="image"
    />
    <div className="menu-icon" onClick={this.handleClick}>
      <i className={this.state.clicked ? "fas fa-times" : "fas fa-bars"} />
    </div>
    <ul className={this.state.clicked ? "nav-menu active" : "nav-menu"}>
      {MenuItems.map((item, index) => {
        return (
          <li key={index}>
            <a className={item.cName} href={item.url}>
              {item.title}
            </a>
          </li>
        );
      })}
    </ul>
    <Button>Sign up</Button>
  </nav>
);

Answer 2

进入开发者控制台，点击img源在新标签中打开，查看图片是否在新标签中打开。