javascript - React 将背景 url 转换为 base64 图像
问题描述
我是 React 新手,现在我在项目中使用 SCSS 和 React 最新版本。在我的 SCSS 文件中,我有
display: flex;
flex-direction: column;
justify-content: space-between;
background: url(../../assets/img/comp-img/game-box-bg.png) no-repeat 100% 100%;
myComponent.jsx 使用已安装的 node-sass 包导入此 SCSS 文件。问题是当我检查元素时,我在浏览器中看到了这个结果:
background-image: url(data:image/png;base64,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
为什么 React 会自动将图像 url 转换为 base 64???
我做错了什么??
解决方案
推荐阅读
- javascript - js替换为不同的名称
- css - 如何将动画渐变添加到 svg 路径?
- python - 使用预定义函数打开文件(使用方法)
- rust - 如何获取可变 u32 指针并将其转换为 C 的 int 指针
- json - react native-json 解析(无法在我的代码中解析 json 对象)
- ios - 如何使用 Playground 获取创建的 mlmodel 的边界框数据
- c - 自定义 Windows 身份验证包
- android - UserVisibilityHint 函数在 Fragmnent 可行时不会每次都被调用
- mysql - 列出 MySQL 中所有具有 DML 权限的用户
- android - 在 AOSP 中运行本地单元测试(Junit 和 Mockito)