react在less中引用图片不管用,该如何引用呢?

code_sir
  • 456

问题描述

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

相关代码

.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;
}

替代方式

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

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

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

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

background-image: url('./images/check@2x.png') no-repeat 10px 8px;
上面的写法报错:
Module not found: Can't resolve 'images/check@2x.png'

目录路径

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

我试了下绝对路径,报同样的错。
回复
阅读 7.8k
3 个回答

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

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

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

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

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

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

你知道吗?

宣传栏