我无法在我的 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

没有必要 relativity 引用 CSS 中的 public 目录。你试过了吗：

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

我无法在我的 React 应用程序中使用 css 中的文件夹路径

I cannot use folder path in css in my react app

css

background-image

reactjs

css-loader