cannot resolve relative url in scss react

Question

I'm attempting to use a relative path within my SCSS to target an image file on my public directory (using native create-react-app environment):

.image{
    background: url("/cdn/static/images/logo/main_nav.png") center / contain;
}

Ideally, this would point to localhost:3000/cdn/etc... (where cdn is located in my public directory), however for some reason I just get an error in my React app:

./src/Imports/css/module/navigation.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/Imports/css/module/navigation.css)

Error: Can't resolve '/cdn/static/images/logo/main_nav.png' in '/Users/user/Documents/react/app/src/Imports/css/module'

I'm unsure why React can't resolve the path, but it shouldn't even be looking in the first place. Should it not just be the stylesheet handling the retrieval?

Here's my file structure:

-app
  -public
    index.html
    -cdn
      -static
        -images
          -logo
            main_nav.png
  -src
    index.js
    -components
      -modules
        navigation.js (the file the css is imported into)
    -imports
      -css
        -module
          navigation.scss
          navigation.css (the generated css file)

All help is appreciated,
Cheers.

EDIT: If I try to use a relative url to the React app, I get this error:

You attempted to import ../../../../public/cdn/static/images/logo/main_nav.png which falls outside of the project src/ directory