Issue encountered while attempting to include a background image in React JS

I encountered an issue when attempting to include a background image in react js.

  ./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
    Unable to locate module: An attempt was made to import ../public/img/bg.jpg, which is outside of the project src/ directory.
    Imports from paths outside of src/ are not allowed.

This is my css:

   section{
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      background: url("../public/img/bg.jpg");
      background-attachment: fixed;
    }
    .container{
      position: relative;
      margin-top: 200vh;
      background: #fff;
      padding: 100px;
    }

Answer №1

Make sure to include the image in your component by importing it from '../image.jpeg'. You can then use it in your HTML tags, or consider removing the 'images' folder from the public directory. It may be necessary to adjust the default setting for exporting public files in order to use images in this manner.

For more information on this topic, check out this helpful resource: Link

Answer №2

To view images or files, avoid accessing them from the public folder. Move those files to the src directory in order to use them properly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Use jQuery to target an element by its class name and node index

I am trying to target a specific element with the class ".myclass" by its node index, but I keep encountering an error stating that the element has no "animate" function. Here is an example: <div class="myclass"></div> <div class="myclass" ...

Determine the number of distinct elements in fields using MongoDB aggregation

After executing my query, I received documents in the following format: { _id: '48nmqsyxmswpkkded2ac_331fabf34fcd3935', actions: { sales: { pixel: [Object] } }, date: Sun Jul 27 2014 00:00:00 GMT-0400 (EDT), client: '48nmqsyxmswpkkded ...

Having trouble starting the localhost for my latest NextJS React project, as I keep getting the error message "Compiled /not-found in 1080ms"

Recently began a fresh setup of NextJS and I'm encountering an issue with starting up localhost. Each time I attempt to reload the project, I receive the error message 'Compiled /not-found in 1080ms (387 modules)'. Has anyone faced this issu ...

Ways to create a looping mechanism with specified number restrictions and limitations

Can anyone assist me with this problem? I am looking to create a "looping" effect similar to the image provided. What is the logic behind this repetition? Thank you in advance for your help! Here is an example output: ...

A declaration of "import '***.css';" was located within an ECMAScript module file in the monaco-editor npm library

It's perplexing to me why the developers of monaco-editor included these statements, as they are actually causing errors in my browser such as: Failed to load module script: Expected a JavaScript module script but the server responded with a MIME typ ...

Joi mistakenly demanding certain fields that should not be mandatory

I've encountered an issue with posts validation using @hapi/joi 17.1.1. In my schema, I have two fields: textfield and picture. Although both fields are not required, the validation is still indicating that the picture field is mandatory. posts valid ...

Listener for a special event in Three.js

As I embark on my journey with Three js, I find myself in search of a unique event listener that seems to elude me online. I am curious whether it is feasible to execute a specific action when the first-person viewer enters an object. Any advice would be ...

The error message "Error: Node.js heap out of memory" occurred while running the npm build command in NestJS

I'm encountering a problem with my Nest js API. While everything works perfectly when I build it locally and can start the development server without any issues, I face difficulties building or starting the server when deploying to my hosting server. ...

Angular 2's Multi-select dropdown feature allows users to select multiple options

Recently, I encountered an issue with customizing CSS for angular2-multiselect-dropdown. I found the solution in this link: https://www.npmjs.com/package/angular2-multiselect-dropdown. I have included my code below. Any assistance in resolving this matter ...

full-page overlay is covering the entire screen

Is there a CSS-based solution to create an overlay that remains visible even when the page is scrolled down? I want to use this overlay behind a popup. Using JavaScript to set the height of the overlay based on the page's content is one option, but I& ...

Strategies to verify if two objects of the same class possess the same attribute

I have multiple elements with the same class and unique attribute values, such as: <div class="myclass" data-attr="1"></div> <div class="myclass" data-attr="2"></div> <div class="myclass" data-attr="3"></div> <div cl ...

Encountering an issue: Unable to load resources - Server returned a status code of 500

Struggling with implementing ajax code in my app development. I've encountered an issue where the ajax code that works fine in the video tutorials I'm following doesn't seem to work for me. It's really frustrating! Here is a snippet of ...

Transferring Data between Rails and Angularjs using JSON

Utilizing Angularjs to fetch JSON data from a Rails test app deployed on Heroku is proving to be a bit challenging. Below you can find the snippets of my Angular and Rails code. An error message displayed in my Firebug console reads: "NetworkError: 404 N ...

Is there a way to retrieve a list of li tags using BeautifulSoup4 in Python?

I am attempting to extract information from a Persian webpage where I need to retrieve only 3 li tags out of a ul element that contains 6 of them. The issue is that each li tag also has nested li tags within it, so when I use soup.find_all('li'), ...

What is the best way to create a function that can disable console.log and be imported into other React files for easy access?

Here is the content of my static.js file: var Helper = { console.log: function(){ }, Login: function(){ var name; var password; //rest of the code } } module.exports = Helper; Now, in my test.js file: var Helper ...

React functional component fails to update when appending data to an array

I am facing an issue with my functional component where the data is not updating when I push new items to an array: const Experience = (props) => { let experience = [{ from:"", to:"", employer_name:"", employer_numb ...

What is the process for obtaining data from MongoDB using logical queries in Node.js?

Looking to retrieve chat histories from mongodb and utilize logical queries in mongodb. I have a message object containing 'to', 'sender', and 'message'. For example, the mongodb structure might look like this: -->to: A ...

Streaming large files with Node.js can lead to significant memory consumption and potential memory errors like OOM

My current project involves using node.js to download large files (300MB) from a server and then piping the response to a file write stream. While I have a good understanding of how pipes work in Node.js, I am encountering an issue where the memory usage o ...

I am attempting to establish a connection with the Converge Pro 2 system from Clearone using NodeJS node-telnet-client, but unfortunately, my efforts to connect have been unsuccessful

My connection settings are as follows: { host: '192.168.10.28', port: 23, shellPrompt: '=>', timeout: 1500, loginPrompt: '/Username[: ]*$/i', passwordPrompt: '/Password: /i', username: 'clearone ...

Using Flask and AngularJS: Managing Scope in a Controller with Flask Templating

Currently, my primary objective is to create a table with sortable columns. While following a tutorial and attempting to implement it into my project, I have encountered an issue. It seems that the structure of my code will not allow this functionality to ...