React app always re-downloads images when using react-router

Question

I have create-react-app project with react-router-dom .

I have few Components what act like pages in SPA. All pages have same component in them:

return (
      <img
        src="/images/logo.png"
        width={this.props.width}
        height={this.props.height}
        className="d-inline-block mb-2"
        alt="Logo"
      />
    );

Everytime I change component (view) with my react-router-dom the image gets re-downloaded from server (new request is sent): It is same with FontAwesome svg icons.

How to preload or cache images in React to load them just once? I think image should not download everytime I change view.

Answer 1

将您的图像放在public/static文件夹中。