Reactjs 为什么我的图像在刷新时会短暂出现，然后在刷新时消失

我正在使用MERN stack构建一个购物车。问题是我的图像没有出现，刷新时图像只会短暂出现。它向我显示了一个无法显示图像的图标。我的所有图像都在src文件夹内的images文件夹中。这是我的密码

import React, { Component } from "react";
import "../css/styles.css";
import {
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Form,
  FormGroup,
  Label,
  Input
} from "reactstrap";
import axios from "axios";
import Cart from "./cart1.component";


export default class BookDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      book: [],
      modal: false,
      cover: ""
    };
  }

  componentDidMount() {
    axios
      .get("http://localhost:4000/books/" + this.props.match.params.id)
      .then(response => {
        this.setState({ book: response.data, cover: response.data.cover });
      })
      .catch(function(err) {
        console.log(err);
      });
  }
  toggle = () => {
    this.setState({
      modal: !this.state.modal
    });
  };

  AddToCart = e => {
    const { book } = this.state;
    let id = book._id;
    let cover = book.cover;
    let price = book.price;
    let qty = 1;
    let product = { id: id, cover: cover, price: price, qty: qty };
    let existing = JSON.parse(sessionStorage.getItem("cart"));
    existing = existing ? existing : [];
    let val = existing.filter(item => item.id === id);
    if (existing.length !== 0) {
      if (val.length != 0) {
        existing.forEach(item => {
          if (item.id === id) {
            item.qty++;
          }
        });
      } else {
        existing.push(product);
      }
    } else {
      existing.push(product);
    }

    sessionStorage.setItem("cart", JSON.stringify(existing));
  };
  getImages = cover => {
    let imagesURL = [
      "../images/csharp.jpg",
      "../images/css.jpg",
      "../images/javascript.jpg",
      "../images/json.jpg",
      "../images/lpthw.jpg",
      "../images/mongodb.jpg",
      "../images/node.jpg",
      "../images/php.jpg",
      "../images/python.jpg",
      "../images/sql.jpg"
    ];

    const bookUrl = `../images/${cover}`;
    let coverUrl = "../images/nocover.jpg";
    imagesURL.forEach(url => {
      if (url == bookUrl) {
        coverUrl = bookUrl;
      }
    });

    return coverUrl;
  };

  render() {
    const { book, quantity } = this.state;
    let src = this.getImages(this.state.cover);
    return (
      <div className="container">
        <div className="row">
          <div className="col-sm-6">
            <img src={src}></img>
          </div>
          <div className="col-sm-6">
            <h2>{book.title}</h2>
            <ul>
              <li>Category: {book.category}</li>
              <li>Author: {book.author}</li>
            </ul>
            <p className="button blue">${book.price}</p>
            <p>{book.description}</p>
            <button
              id={book._id}
              onClick={() => {
                this.toggle();
                this.AddToCart();
              }}
              className="btn btn-success"
            >
              Add to Cart
            </button>
            <Modal isOpen={this.state.modal} toggle={this.toggle}>
              <ModalHeader toggle={this.toggle}>My Cart</ModalHeader>
              <ModalBody>
                <Cart></Cart>
              </ModalBody>
            </Modal>
          </div>
        </div>
      </div>
    );
  }
}

import React，{Component}来自“React”；
导入“./css/styles.css”；
进口{
按钮
情态动词
莫达尔海德，
ModalBody，
莫达沃特，
形式，
FormGroup，
标签，
输入
}从“反应带”；
从“axios”导入axios；
从“/cart1.component”导入购物车；
导出默认类BookDetails扩展组件{
建造师（道具）{
超级（道具）；
此.state={
账簿：[]，
莫代尔：错，
封面：“”
};
}
componentDidMount（）{
axios
.get（“http://localhost:4000/books/“+this.props.match.params.id）
。然后（响应=>{
this.setState（{book:response.data，cover:response.data.cover}）；
})
.catch（函数（err）{
控制台日志（err）；
});
}
切换=（）=>{
这是我的国家({
模态：！this.state.modal
});
};
AddToCart=e=>{
const{book}=this.state；
let id=书本。\u id；
让封面=书的封面；
让价格=账面价格；
数量=1；
let product={id:id，cover:cover，price:price，qty:qty}；
让existing=JSON.parse（sessionStorage.getItem（“购物车”）；
现有=现有？现有：[]；
让val=existing.filter（item=>item.id==id）；
如果（现有的.length！==0）{
如果（值长度！=0）{
现有的.forEach（项=>{
如果（item.id==id）{
项目数量++；
}
});
}否则{
现有产品；
}
}否则{
现有产品；
}
setItem（“cart”，JSON.stringify（现有））；
};
getImages=cover=>{
设imagesURL=[
“./images/csharp.jpg”，
“./images/css.jpg”，
“./images/javascript.jpg”，
“./images/json.jpg”，
“./images/lpthw.jpg”，
“./images/mongodb.jpg”，
“./images/node.jpg”，
“./images/php.jpg”，
“./images/python.jpg”，
“./images/sql.jpg”
];
const bookUrl=`../images/${cover}`；
let coverUrl=“../images/nocover.jpg”；
imagesURL.forEach（url=>{
如果（url==bookUrl）{
coverUrl=bookUrl；
}
});
返回coverUrl；
};
render（）{
const{book，quantity}=this.state；
让src=this.getImages（this.state.cover）；
返回(
{书名}

类别：{book.Category}
作者：{book.Author}

${book.price}
{book.description}

{
this.toggle（）；
这是AddToCart（）；
}}
className=“btn btn成功”
>
添加到购物车
我的手推车
);
}
}

---

我已经坚持了差不多两天了。我尝试在src组件中使用require，但这给了我一个错误，../images/nocover.jpg模块找不到。请，我非常感谢您的帮助。

当您在src组件中使用require时，您能将该行复制给我吗？当然！这是行，src变量在代码中初始化，但这给了我一个错误。错误：找不到模块“../images/nocover.jpg”让我们通过在src中移动图像文件夹来尝试一个快速测试，因此您的url如下所示。'/images/nocover.jpg'（1点而不是2点），src={require（src）}代码。这可能是创建react应用程序设置的问题。你能试试吗？现在错误是：找不到模块'./images/nocover.jpg'我也有同样的问题。我尝试使用“require”，图像显示正确。但现在Idk为什么它突然停止显示。即使在使用require之后，是否有人可以帮助解决此问题。我也看到了控制台，没有出现错误，但它在控制台中显示了这个。。。。“[HMR]正在等待来自WDS的更新信号…”