Guide to configuring a background image from the public folder in a React application using Create React App

Question

Guide to configuring a background image from the public folder in a React application using Create React App

How do I properly set a background image in a .css file located in the src folder?

src/Components/Component/Comp.css

.services {
  background-image   : url("./images/img-2.jpg");
  background-position: center;
  background-size    : cover;
  background-repeat  : no-repeat;
  color              : #fff;
  font-size          : 100px;
}

After encountering an error:

Error: ENOENT: no such file or directory, open 'C:\xampp\htdocs\react\react-website\src\images\img-1.jpg'

To fix it, I transferred the images folder from public to src, which resolved the issue. However, now I am facing difficulty accessing those images in a React Component, such as:

src/Components/Cards/Cards.js

<CardItem
src="./images/img-9.jpg"
text="Explore the hidden waterfall deep inside the Amazon jungle"
label="Adventure"
path="/services"
/>

src/Components/Cards/CardItem.js

const { src, text, label, path } = props

    return (
        <>
            <li className="cards__item">
                <Link className="cards__item__link" to={path}>
                    <figure className="cards__item__pic-wrap" data-category={label}>
                        <img src={ src } alt="Travel" className="cards__item__img" />
                    </figure>
                    <div className="cards__item__info">
                        <h5 className="cards__item__text">{text}</h5>
                    </div>
                </Link>
            </li>
        </>
    )

Even though no error is being displayed, the image simply does not appear.

How can I correctly store the images folder and access resources from .css and .js files?

javascript css reactjs jsx create-react-app

Answer 1

Answer №1

If you prefer not to directly import an image into your component, you can still display the image using the following method:

var imageName = require('./images/img-9.jpg')
<img src={imageName} />

In this case, the `require` function is utilized for static "imports", requiring you to adjust your import statements.

Alternatively, you can achieve the same result with the following approach:

import imageName from './images/img-9.jpg';
<img src={imageName} />

This presents another way to accomplish the task.

Answer 2

If you prefer not to directly import an image into your component, you can still display the image using the following method:

var imageName = require('./images/img-9.jpg')
<img src={imageName} />

In this case, the `require` function is utilized for static "imports", requiring you to adjust your import statements.

Alternatively, you can achieve the same result with the following approach:

import imageName from './images/img-9.jpg';
<img src={imageName} />

This presents another way to accomplish the task.

Answer 3

Answer №2

Since your file is located at

src/Components/Component/Comp.css

and the image is in the public folder, you will need to navigate 3 levels up from the Comp.css file to access the image. You can achieve this by using a path like the following, which should work and may be suggested by your IDE:

<CardItem
src="../../../public/images/img-9.jpg"
/>

However, it is recommended to avoid placing images directly in the public folder. It is better practice to create an assets folder within your src directory, and then a images folder within the assets to store your images.

In this scenario, the path would be:

../../assets/images/img-9.jpg

Answer 4

Since your file is located at

src/Components/Component/Comp.css

and the image is in the public folder, you will need to navigate 3 levels up from the Comp.css file to access the image. You can achieve this by using a path like the following, which should work and may be suggested by your IDE:

<CardItem
src="../../../public/images/img-9.jpg"
/>

However, it is recommended to avoid placing images directly in the public folder. It is better practice to create an assets folder within your src directory, and then a images folder within the assets to store your images.

In this scenario, the path would be:

../../assets/images/img-9.jpg

Answer 5

Answer №3

Here is my unique approach:

const { source, content, tag, route } = props

    // In order to create a dynamic solution for reusing the component, I assigned the source value and complete route to a constant variable.
    // NOTE: Since it is an object, we need to access the default property
    const imageSource = require(`../../assets/images/${source}`).default

    return (
        <>
            <li className="cards__item">
                <Link className="cards__item__link" to={route}>
                    <figure className="cards__item__pic-wrap" data-category={tag}>
                        <img src={imageSource} alt="Travel" className="cards__item__img" />
                    </figure>
                    <div className="cards__item__info">
                        <h5 className="cards__item__text">{content}</h5>
                    </div>
                </Link>
            </li>
        </>
    )

Answer 6

Here is my unique approach:

const { source, content, tag, route } = props

    // In order to create a dynamic solution for reusing the component, I assigned the source value and complete route to a constant variable.
    // NOTE: Since it is an object, we need to access the default property
    const imageSource = require(`../../assets/images/${source}`).default

    return (
        <>
            <li className="cards__item">
                <Link className="cards__item__link" to={route}>
                    <figure className="cards__item__pic-wrap" data-category={tag}>
                        <img src={imageSource} alt="Travel" className="cards__item__img" />
                    </figure>
                    <div className="cards__item__info">
                        <h5 className="cards__item__text">{content}</h5>
                    </div>
                </Link>
            </li>
        </>
    )

Answer 7

Answer №4

As we approach the end of 2021, the ongoing discussion around a perplexing issue in the related repository continues to confound many users, especially those utilizing the most recent version of CRA (Create React App).

A single commit appears to be the culprit behind the chaos, leading to an intriguing tale that introduces you to a "famous guy" within the discussion. Dive into the details here.

For those grappling with the same problem and finding other solutions ineffective, the best course of action seems to involve relocating all images to the src folder. While not ideal and suitable only in specific scenarios, this approach currently stands out as the most viable option.

Personally, I opted to create a designated folder within src titled src/assets/images and transferred all my images there. To utilize any image from this folder in JSX files, the initial step is importing it, following a similar path as demonstrated below:

import deleteModalIcon from '../../../assets/images/delete_modal_icon.svg'

Subsequently, the imported image can be utilized as showcased:

<img src={deleteModalIcon} alt='' />

In my CSS file, situated at the top level of the src folder, I implemented the following method to incorporate an image:

.name:after {content: url('assets/images/edit_icon.svg');}

It's important to highlight the concerns raised within the discussion regarding disappearing images post-build.

To future readers: If a reliable solution or an official fix emerges for this issue during your time, kindly share it in the comments section =)

Answer 8

As we approach the end of 2021, the ongoing discussion around a perplexing issue in the related repository continues to confound many users, especially those utilizing the most recent version of CRA (Create React App).

A single commit appears to be the culprit behind the chaos, leading to an intriguing tale that introduces you to a "famous guy" within the discussion. Dive into the details here.

For those grappling with the same problem and finding other solutions ineffective, the best course of action seems to involve relocating all images to the src folder. While not ideal and suitable only in specific scenarios, this approach currently stands out as the most viable option.

Personally, I opted to create a designated folder within src titled src/assets/images and transferred all my images there. To utilize any image from this folder in JSX files, the initial step is importing it, following a similar path as demonstrated below:

import deleteModalIcon from '../../../assets/images/delete_modal_icon.svg'

Subsequently, the imported image can be utilized as showcased:

<img src={deleteModalIcon} alt='' />

In my CSS file, situated at the top level of the src folder, I implemented the following method to incorporate an image:

.name:after {content: url('assets/images/edit_icon.svg');}

It's important to highlight the concerns raised within the discussion regarding disappearing images post-build.

To future readers: If a reliable solution or an official fix emerges for this issue during your time, kindly share it in the comments section =)

Guide to configuring a background image from the public folder in a React application using Create React App

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Jenkins Docker build fails for React app, while the local build is successful

I have created an Express.js application. Whenever I visit a page, I consistently need to refresh in order for the variables to appear correctly

Trouble arises when emitting events in Vue using eventHub

Incorporate a progress bar into the Material-UI table design

JavaScript form validation: returning focus to textfields

Experiencing issues while trying to publish on Cloudflare Workers?

Navigating through route parameters and application logic

Can the ID attribute be used in the closing tag of an HTML element

What is the best way to determine if a radio button has been chosen, and proceed to the next radio button to display varied information?

Redirecting to a specified URL after submitting a POST request in Angular

Implement tippyjs-react within individual cells of a table

The issue arises when trying to use both CSS Sprite and Background Gradient simultaneously in Chrome/Safari

Require assistance to resolve variable scope problems

Tips for executing Cross-Origin-Requests from Firebase Hosting to an AWS Lambda function

Dynamic Namespaces in Socket.io is a feature that allows for

The Bootstrap 4 modal appears to be failing to load properly, as it is only

"Is there a way to position a button at the bottom using HTML and

Exploring Concealed Data and Corresponding in jquery, javascript, and html

Creating a custom Higher Order Component to seamlessly connect react-relay and react-router using TypeScript

Guide on personalizing the Material stepper component with labels positioned at the top