Webpack fails to handle CSS background images

I'm having trouble with my Webpack configuration as it's not processing CSS images set in the background property:

background: url('./hero.jpg') no-repeat right;

This is resulting in an error message that reads:

ERROR in ./src/app/components/Contact/Contact.style.scss (./node_modules/mini-css-extract-plugin/dist/loader.js??ruleSet[1].rules[1].use[1]!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/app/components/Contact/Contact.style.scss)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve 'assets/img/section/hero.jpg' in

I'm looking for guidance on what URL to use in the CSS property so that Webpack can properly recognize it. Any ideas?

Screenshot of dist directory:

https://i.sstatic.net/8996O.png

Screenshot of public directory:

https://i.sstatic.net/Hku9T.png

javascriptcssnode.jsreactjswebpack

Answer №1

Managed to figure it out on my own. If you need assistance with the solution, just let me know:

{
  test: /\.(png|jpg|gif)$/,
  loader: 'file-loader',
  options: {
    publicPath: path.resolve(__dirname, '/assets/img'),
    outputPath: 'assets/img',
    name: '[name].[ext]'
  }
}

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

Using Sinonjs fakeserver to handle numerous ajax requests

I utilize QUnit in combination with sinon. Is there a way to make sinon's fakeserver respond to multiple chained ajax calls triggered from the same method? module('demo', { beforeEach: function(){ this.server = sinon.fakeServer. ...

javascriptajaxqunitsinon

The image source failed to load the image using the function

Initially, I set up a sandbox to work on this issue: https://codesandbox.io/s/naughty-almeida-u66mlt?file=/src/App.js The main problem arises when the requested image fails to display after the function is called and the URL is returned. Here are my atte ...

javascriptreactjsgoogle-cloud-firestorefirebase-storage

Customize RequireJS dependencies for flexible dependency injection

Currently, I am faced with integrating a component that would greatly benefit from Dependency Injection (DI) into an existing framework where DI was not considered during its initial design. The configuration defining dependencies is sourced from a backend ...

javascriptdependency-injection

Troubleshooting issues with ember-data's belongsTo relationship

I am facing an issue with the model I have: Whenever I make a call to this.store.find('history'); A request is sent to http:://www.example.com/api/histories/ and I receive the following JSON response: { "tracks":[ { "id":83, ...

javascriptjsonember.jsember-data

What is the best way to achieve a consistent style for two tables?

I would like to achieve uniform styling for each row. The first row, which contains 'het regent vandaag', has the following CSS rule: .attachments-table td { margin: 0 5px; padding: 10px 8px; line-height: 1.4; white-space: pre-wr ...

htmlcssangularjs

The React code gets reorganized automatically once modifications are made and saved

I'm currently working on a React project using Visual Studio Code. Whenever I hit Ctrl+S in Visual Studio Code to save a file, it seems to remove all the ReactJS formatting and scatter the code within the file. Code Before Saving: import logo from &a ...

reactjsvisual-studioweb

What is the best way to get a date in the following format?

I need to format the date in a specific way while using node.js. The desired format is: Sun July 16th This date needs to be extracted from: var myDate = new Date(); Can anyone provide guidance on how to achieve this? ...

node.js

When running through Selenium web driver, JS produces inaccurate results

Currently, I am utilizing JavaScript to determine the number of classes of a specific type. However, when I run the JS code in Webdriver, it provides me with an incorrect value. Surprisingly, when I execute the same JavaScript on the Firebug console, it gi ...

javascriptselenium

Choose an option from a dropdown menu and assign it to a JavaScript variable

Is it possible to store the selected option from a dropdown list as a JavaScript variable, even when new Ajax content is loaded on the page? Below is a simple form code example: <form name="searchLocations" method="POST"> <select name="l ...

javascriptajaxformsvariables

Develop a JavaScript function to declare variables

I am currently attempting to develop a small memory game where the time is multiplied by the number of moves made by the player. Upon completion of all pairs, a JavaScript function is executed: function finish() { stopCount(); var cnt1 = $("#cou ...

javascriptjqueryhtml

Ways to eliminate a single child from a jQuery object without altering the HTML structure

My code snippet looks like this: $.fn.extend({ del: function() { } }) var ds = $(".d"); ds.del(ds[0]) console.log(ds.length) I am trying to use jquery.del to remove a child from some jquery elements without altering the HTML. Any suggest ...

javascriptjquery

Unable to call a basic object's prototype method

Just starting out with node and feeling like I might be overlooking something simple. In my model file, I have a class that creates new object instances in the following way: const mongodb = require('mongodb'); const getDb = require('../util ...

javascriptnode.js

What is the best way to showcase the final div at the top with CSS?

I'm working with 4 separate divs, with the last one acting as a footer. Is there a way to position this last div at the top using CSS? ...

csslayouthtml

I'm encountering an authentication issue while passing an axios configuration object containing an authorization token. Can anyone provide insight on why this is happening? Using

I am currently developing a small social networking application and have implemented a feature for users to like posts. To ensure security, I have set up an authentication middleware as shown below: const auth = async (req, res, next) => { // check he ...

node.jsreactjsredux

javascript include new attribute adjustment

I am working with this JavaScript code snippet: <script> $('.tile').on('click', function () { $(".tile").addClass("flipOutX"); setTimeout(function(){ $(".tile-group.main").css({ marginLeft:"-40px", widt ...

javascriptjquerycssclass

Manipulate children in Material UI components based on their class

My Goal I am looking to apply styles to the class button within the state of the class root, such as on :hover. My Approach I am attempting to have the button display on root:hover. const styles = { root: { '&:hover' { ...

reactjsmaterial-uijss

Encountered a Node.js build error related to a Java module

Encountering issues while attempting to integrate the JAVA module into my NodeJS application on Ubuntu: NodeJS: v6.2.0 NPM: 3.8.9 Node-gyp: v3.3.1 Python: 2.7.12 GCC: 5.4.0 Despite having all the required dependencies, I consistently face errors when ...

javascriptjavanode.jsnpmnode-gyp

Problem with AWS Lambda function handler failing to insert data into Athena

Trying out a sample code snippet for Amazon Athena to test data insertion, but it's not working as expected. The CloudWatch logs don't show any output after the statement execution is completed. Even when switching to a simple select statement, t ...

javascriptnode.jsaws-lambdaamazon-athena

Using Plotly.js within a deleted Vue.js component may result in displaying an incorrect chart

Issue I am facing a problem with deleting one of the components that contains a chart. Even after deleting the component, the chart remains visible. To see an example, check out this jsfiddle: https://jsfiddle.net/m4ywp5fc/4/ Solution Attempted I attem ...

javascriptvue.jsplotly

Unlimited scrolling gallery with multiple rows

I am looking for a way to create a multi-row infinite loop scrolling gallery using html, css, and javascript. Can anyone help me with this? ...

javascriptjqueryhtmlgalleryinfinite