找不到模块：将图像导入 React 项目时无法解析“../images/bg-header-desktop.svg”

Question

I am building a React project and I am having difficulties in importing a background image. I am getting the error above. The image is in an images folder which is in a public folder. This is my structure of the app.

The image is bg-header-desktop.svg. This is how I want it to look like. The code I have for the component is the following:

import React from "react";

import "./heading.styles.css";

const Heading = () => (
 <header>
 <div className="top-background">
 </div>
 </header>
 );

 export default Heading;

My css looks like this this:

.top-background {
height: 155px;
background-image: url(../images/bg-header-desktop.svg);
background-color: #5da4a4;
margin-bottom: 70px;
}

This is how I would like it look. Any help would be appreciated.

Answer 1

It should be like this

.top-background {
  height: 155px;
  background-image: url("/images/bg-header-desktop.svg");
  background-color: #5da4a4;
  margin-bottom: 70px;
}