resolve-url-loader error when using image in jsx files in React Application-CodePudding

I'm rewriting old code and I want to move image definition from .css files ( background: url('./../images/something.svg') ) to .jsx and also I'm removing webpack and want to use only react-script. When I move the image to .jsx file that I first import the image import something from '../../../images/something.png'; and then I use it <img src={something} alt="Something" /> after this I'm getting error Module build failed (from ./node_modules/resolve-url-loader/index.js): Error: resolve-url-loader: error processing CSS file://C:\dev\my-project\src\images\something.png:1:1: Unknown word or Unclosed string in the end

CodePudding user response：

When you import images to jsx file your syntax will look like this

import img from '../../../images/something.png'

const App = () => {
  return(
    <>
      <img src={img}/>
    </>
  );
}

when you import you add image to "variable" at this case it's img

CodePudding user response：

As you import footer in this line import footer from '../../../images/something.png';, you must use footer as a variable in the attribute's value of img tag because it specifies the path to the image.

For example,

Code must be

<img src={footer} alt="Something" />

Instead of

<img src={something} alt="Something" />