It doesn't work for react to reference a picture in less, so how do you reference it?

problem description

using less to write css, requires setting a background image, which doesn"t work.

related codes

.check{
    width: 10px;
    height: 8px;
    position: absolute;
    background-image: require("./images/check@2x.png") no-repeat 10px 8px;
    right:1px;
    bottom:2px;
    z-index: 20;
}

alternative

use style instead in your code.

import checkImage from "./images/check@2x.png"

const checkStyle = {
  backgroundImage: `url(${checkImage})`,
}

how do I make the background image written in css work? What is the cause of this?

background-image: url (". / images/check@2x.png") no-repeat 10px 8px;
the above error report:
Module not found: Can"t resolve "images/check@2x.png"

directory path

src
|-- components
|-|-- Check
|-|-- images
|-|-index.js
|-|-index.less
|
|-- routes
|-|-Shop
|-|-List
|-|-index.js

I tried absolute path and reported the same error.
Jul.22,2021

what value is your webpack.output.publicPath set?

  

check whether the file path is wrong

Menu