(React) 为什么无法在 css 中解析 img css 背景图片？

Question

我试图 post 在 css 中通过背景 url 进行 img，但错误总是这样发生...

Error: Can't resolve './src/resource/Original.svg' in 'C:\Users\User\IdeaProjects\demo\personal-blog\src\components\Sidebar'

为什么会出现这个错误？

//这是组件代码

        <Link to={'/'}>
            <div className="logo"></div>
        </Link>

// 有问题 css 文件

.Sidebar .logo {
background: url("src/resource/Logo/Resizable Vector Files/Original.svg");
}

Answer 1

我认为您的 Sidebar.js 文件 ./src/resource/Original.svg 没有正确导入

Answer 2

您输入的 ./src/resource/Original.svg 错误或者您没有输入 background-image:url();

Answer 3

您可以在组件文件中使用 JSS 样式而不是 CSS。所以你应该像下面这样编写你的组件：

import backgroundImg from './src/resource/Original.svg'
const styles = {
    main: {
        backgroundImage: `url(${backgroundImg})`
    }
}
.
.
.
<Link to={'/'}>
            <div style={styles.main}></div>
        </Link>

(React) 为什么无法在 css 中解析 img css 背景图片？

(React) Reason Why can't resolve img css background img in css?

css

image

reactjs

snap.svg