./src/routeCollector/Page/MainPage/MainPage.tsx Module not found: Can't resolve './common/-CodePudding

this my code

import Header from "../../../components/Header";
import WaveBoard from "../../../components/WaveBoard";

import HeaderBackground from "./common/HeaderBackground.svg";
import "./MainPage.css";

export default function MainPage() {
  return (
    <div className={"MainPage"}>
      <img src={HeaderBackground} alt="Logo" />
      <Header />
      <WaveBoard />
    </div>
  );
}

when i want to import SVG from public folder i get this error.

./src/routeCollector/Page/MainPage/MainPage.tsx Module not found: Can't resolve './common/HeaderBackground.svg' in 'C:\Users\darkc\Desktop\New folder (7)\src\routeCollector\Page\MainPage'

CodePudding user response：

According to the MDN documentation for the import statement:

The static import statement is used to import read only live bindings which are exported by another module.

Import is not used to "import" a graphic, but to import variables from another script file or a library/module.

You could set the path to the svg-file in a constant like this:

const pathToHeaderBackground = './common/HeaderBackground.svg'

and then include the variable in the src-attribute:

<img src={pathToHeaderBackground} alt="Logo" />

CodePudding user response：

You dont seem to import from public folder, as the error says. Your path should include 'public' in its path if its based in public folder.

However, if it comes to SVGS in react I would suggest to import them as components, this works in my experience best. Example:

import { ReactComponent as YourSvgComponentName } from "YourPath";

I have created a sandbox to show you proper imports and suggested svg import in react