accessing images from public folder reactjs

Question

I am trying to access the about-bg.jpg located in the frontend->public->img folders from styles.css but no matter how I tried to put in '../../' or '../' or '../../../' it didn't seem to work. How should I go about resolving this? Many thanks in advance and greatly appreciated for any helps

Here is the directory structure of the react app

Answer 1

For create-react-app it is recommended to import stylesheets, images, and fonts from JavaScript and to only use the public in these cases:

• You need a file with a specific name in the build output, such as manifest.webmanifest.
• You have thousands of images and need to dynamically reference their paths.
• You want to include a small script like pace.js outside of the bundled code.
• Some library may be incompatible with webpack and you have no other option but to include it as a tag.

you can still have access to this using the process.env.PUBLIC like

render() {
  // Note: this is an escape hatch and should be used sparingly!
  // Normally we recommend using `import` for getting asset URLs
  // as described in “Adding Images and Fonts” above this section.
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

you can read more here: https://create-react-app.dev/docs/using-the-public-folder/

that being said the correct way would be to have an assets folder at the root of your app. you can call this anything you want, it doesnt have to be assets

and then you can reference it in your css

<div className="logo" alt="logo" />

.logo {
  height: 200px;
  width: 200px;
  pointer-events: none;
  background-image: url('./assets/logo.svg');
  background-size: cover;
  background-position: center;
}

this is the result

if you're having issues with typing relative paths, ie, ../../../assets as your app gets bigger you can use a 3rd party library like react-app-rewired to configure your relative paths. Here is an article that describes how to do this with create-react-app or you can use absolute imports by configuring a jsconfig.json , here's an article for absolute path

Answer 2

The reason why this isn't working is because you don't have a server hosting the files. The images are not being requested from the local disk, but from the web server that serves the react application. I highly recommend that you build an express server that hosts the dist directory and the public directory that these images exist in. You could also use nginx to do this. Either way you will need a web server of some kind to host the entire application.

Here is an example of the express server I have been using to develop my latest application.

const express = require('express')
const compression = require('compression')
const path = require('path')
const wwwhisper = require('connect-wwwhisper')
const dotenv = require('dotenv')
dotenv.config()

const app = express()
const port = process.env.PORT || 3000

app.use(compression())

// serve files from dist
app.use(express.static(path.resolve(__dirname, '../../client/dist')))

// serve files from static
app.use('/cards', express.static(__dirname + '/../static/cards'))

// spa catch all
app.get('*', (request, response) => {
    response.sendFile(path.join(__dirname, '../../client/dist/index.html'))
})

app.listen(port, () => console.log(`Server started on port ${port}.`))

This is being hosted on heroku, hence the const port = process.env.PORT || 3000 const port = process.env.PORT || 3000 . If you know the port the live app will be mapped to on the container, you won't need this.

You will just want to re-map the express.static absolute path's to where your images are and where your dist directory is built.