css - 我不能在我的 react 应用程序中使用 css 中的文件夹路径

Question

我根本无法在我的 React 应用程序的 css 中设置 img 背景。但是如果我从 React 组件设置样式和设置 img 那么它工作正常，有人可以帮我吗

这会起作用

const style={
    width:'300px',
    height:'200px',
    backgroundImage: 'url(pictures/backgroundPics/1.jpg)'
}

const Test =()=>(  
    <div style={style}/>
)

但这不会

import './test.css'

const Test =()=>(  
    <div className='test'/>
)

CSS

.test{
    background-color: gray;
    width: 300px;
    height: 200px;
    background-image: url(../../public/pictures/randomPics/1.jpg)
}

我已经尝试将我的 css 路径设置为我能想到的多种方式，包括相对于 css 文件或 html 文件设置它，但它要么给我找不到模块，要么给我解析错误。我的测试组件路径是 src/test/test.js，我的 css 文件在同一个测试文件夹中。我正在使用 css-loader v0.28.4

如果我将网址设置为 url 就可以了

background-image: url(http://www.pvhc.net/img226/gzypyldoqaxjhvtyyhei.png)

Answer 1

没有必要相对引用 CSS 中的 public 目录。你试过吗:

background-image: url(/pictures/randomPics/1.jpg)