react在less中引用图片不管用，该如何引用呢？

Question

问题描述

使用less来写css，需要设置一个背景图片，怎设置都不管用。

相关代码

.check{
    width: 10px;
    height: 8px;
    position: absolute;
    background-image: require('./images/[e-mail]') no-repeat 10px 8px;
    right:1px;
    bottom:2px;
    z-index: 20;
}

替代方式

在代码中使用style的方式替代。

import checkImage from './images/[e-mail]'

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

如何让在css中写的背景图片管用？这是什么原因引起的？

background-image: url('./images/[e-mail]') no-repeat 10px 8px;
上面的写法报错：
Module not found: Can't resolve 'images/[e-mail]'

目录路径

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

我试了下绝对路径，报同样的错。

Answer 1

你的webpack.output.publicPath设置了什么值？

output: {
    
    // 省略其他配置...

    // publicPath + 图片的URL 为打包后生成的html文件请求图片的路径，其他静态资源文件同理
    publicPath: "/"
}

你的css代码是否有提取成css文件再打包后的html文件用link标签引入？

Answer 2

webpack里有没有配置处理图片的loader

Answer 3

检查一下文件路径是不是写错了